在 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 HEREclass Orders extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; &nbsp;this.state = {&nbsp; &nbsp; &nbsp; &nbsp;orders: [],&nbsp; &nbsp; &nbsp; &nbsp;loading: true,&nbsp; &nbsp; &nbsp; &nbsp;deleting: false,&nbsp; &nbsp; &nbsp;}&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; .get('/order.json')&nbsp; &nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; // console.log(res.data);&nbsp; &nbsp; &nbsp; &nbsp; const fetchedOrders = [];&nbsp; &nbsp; &nbsp; &nbsp; for (let key in res.data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fetchedOrders.push({ ...res.data[key], id: key });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ loading: false, orders: fetchedOrders });&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({ loading: false });&nbsp; &nbsp; &nbsp; });&nbsp; }&nbsp; deleteHandler = (id) => {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; orders: this.state.orders.filter(orderValue => orderValue.id !== id)&nbsp; &nbsp; })&nbsp; &nbsp; axios.delete(`/order/${id}.json`).then((res) => {&nbsp; &nbsp; &nbsp; this.setState({ deleting: true });&nbsp; &nbsp; &nbsp; console.log(res, this.state.deleting);&nbsp; &nbsp; });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.orders.map((order) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Order&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={order.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ingredients={order.ingredient}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price={order.price}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={order.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delete={() => this.deleteHandler(order.id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}