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

Question

I have get my data from firebase , loop through them and display them to dom. then I added a delete button and send a delete request using axios and it's delete from firebase but the dom doesn't rerender. I set a deleting state to change it in 'then' block but even when I change the state it dosn't rerender! what can I do?

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

You have to update the orders state while calling deleteHandler! Try this code!

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