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

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

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

In React app , I delete my component data on firebase but it does'n delete from my dom even when I change the state

javascript

components

render

reactjs