亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 應用程序中,我在 firebase 上刪除了我的組件數據,但即使我更改了狀態

在 React 應用程序中,我在 firebase 上刪除了我的組件數據,但即使我更改了狀態

泛舟湖上清波郎朗 2023-04-01 17:34:38
我從 firebase 獲取我的數據,遍歷它們并將它們顯示到 dom。然后我添加了一個刪除按鈕并使用 axios 發送了一個刪除請求,它是從 firebase 中刪除的,但是 dom 沒有重新渲染。我設置了一個刪除狀態以在“then”塊中更改它,但即使我更改狀態它也不會重新呈現!我能做些什么?class Orders extends Component {  state = {    orders: [],    loading: true,    deleting: false,  };  componentDidMount() {    axios      .get('/order.json')      .then((res) => {        // console.log(res.data);        const fetchedOrders = [];        for (let key in res.data) {          fetchedOrders.push({ ...res.data[key], id: key });        }        this.setState({ loading: false, orders: fetchedOrders });      })      .catch((err) => {        this.setState({ loading: false });      });  }  deleteHandler = (id) => {    axios.delete(`/order/${id}.json`).then((res) => {      this.setState({ deleting: true });      console.log(res, this.state.deleting);    });  };  render() {    return (      <div>        {this.state.orders.map((order) => (          <Order            key={order.id}            ingredients={order.ingredient}            price={order.price}            id={order.id}            delete={() => this.deleteHandler(order.id)}          />        ))}      </div>    );  }}
查看完整描述

1 回答

?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

您必須在調用 deleteHandler 時更新訂單狀態!試試這個代碼!


import React from 'react';

import axios from 'axios';


// YOUR OTHER IMPORT GOES HERE


class Orders extends Component {

  constructor(props) {

     this.state = {

       orders: [],

       loading: true,

       deleting: false,

     }

  }


  componentDidMount() {

    axios

      .get('/order.json')

      .then((res) => {

        // console.log(res.data);

        const fetchedOrders = [];

        for (let key in res.data) {

          fetchedOrders.push({ ...res.data[key], id: key });

        }

        this.setState({ loading: false, orders: fetchedOrders });

      })

      .catch((err) => {

        this.setState({ loading: false });

      });

  }


  deleteHandler = (id) => {

    this.setState({

      orders: this.state.orders.filter(orderValue => orderValue.id !== id)

    })

    axios.delete(`/order/${id}.json`).then((res) => {

      this.setState({ deleting: true });

      console.log(res, this.state.deleting);

    });

  };


  render() {

    return (

      <div>

        {this.state.orders.map((order) => (

          <Order

            key={order.id}

            ingredients={order.ingredient}

            price={order.price}

            id={order.id}

            delete={() => this.deleteHandler(order.id)}

          />

        ))}

      </div>

    );

  }

}


查看完整回答
反對 回復 2023-04-01
  • 1 回答
  • 0 關注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號