在 React app 中，我删除了我在 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在 React app 中，我删除了我在 firebase 上的组件数据，但即使我更改了状态，它也不会从我的 dom 中删除
【发布时间】：2021-01-12 16:53:39
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs components render

【解决方案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>
    );
  }
}

【讨论】：

你说得对！我忘了更新状态。谢谢。