在 React 应用程序中，我在 firebase 上删除了我的组件数据，但即使我更改了状态

Question

我从 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>    );  }}

Answer 1

您必须在调用 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>

    );

  }

}