Reactjs 组件未在表单提交时重新呈现。它仅在整页刷新时重新呈现

总而言之，我正在通过axios提交一个POST请求，我最难弄明白为什么它不会重新呈现显示新添加数据的组件（所有这些都发生在这里）

这是我的post请求（数据正确保存）：

以下是我的组件的状态：

    state = {
        fiveDayView: [new Date(),
        addDays(new Date(), 1),
        addDays(new Date(), 2),
        addDays(new Date(), 3),
        addDays(new Date(), 4)],
        routeId: '',
        show: false,
        pickup_deliveries: [],
    }

所以。。当我

this.setState（{picku}）

时，我希望我的组件能够重新呈现。不仅如此，在这个组件中，我目前正在从Rails API中提取所有数据，并使用这些数据在该组件中显示。我认为在

this.setState（{picku deliveries}）

和将此数据来自的父组件作为

this.props.apiData

重新呈现之间，我的组件重新呈现和显示新提交的数据不会有问题

抱歉，这让人困惑，但我在这里不知所措。

更改

this.setState({ pickup_deliveries });

到

---

对于基于回调的

setState
首先要检查您是否从API获得空数组（检查网络选项卡）。在这种情况下，您实际上不是在更改数组，而是在运行具有相同值的setState

如果未检测到状态更改，则setState不会重新渲染

第二点重要的是，当您更新状态并使用旧的状态值时，您不应该访问此状态。状态，您的代码应该如下所示：

this.setState((prevState) => ({
  pickup_deliveries: [...prevState.pickup_deliveries, response.data]); 

因为状态更新是异步的，所以在更新状态时不应该依赖于this.state，因为您可能会得到比要更新的状态更旧的状态

关于这个话题的更多信息
引述：

状态更新可能是异步的

React可以将多个setState（）调用批处理到一个更新中以提高性能

由于this.props和this.state可能会异步更新，因此不应依赖它们的值来计算下一个状态

Third（变通方法）通常是一种变通方法，在状态中添加类似“lastRequestTimestamp”的参数以强制更改状态，特别是在处理更新状态中的数组或对象时，此解决方案只是为了向您自己证明，您正在对数组进行变异，这不是一个状态更改，因为数组引用仍然相同，但除了调试之外，您不应该使用此解决方案…
不幸的是，这仍然不会重新呈现组件。但是，正如我所说的，数据在完全刷新时会发布到组件中。这是一个相当恼人的小问题：（非常好的评论！第一条适用于我，我很好奇为什么。数组总是空的…很高兴你发现它很有用，注意第二个问题也适用于你的代码，你只是看不到它的效果，因为API请求比异步状态更新慢。但一般来说，不访问这个。状态值是一个很好的做法n您要将它们传递给setStateSo，这是否意味着我需要在生命周期方法中进行传递，因为prev state与componentWillReceiveProps（）关联。此外，空数组修复是否需要任何后端调整？抱歉，我轰炸了您。否，this.setState接受对象或返回对象的函数，如果是函数，setState将向其传递prevState，因此无需将setState放入生命周期方法中……关于后端调整，这取决于您的要求，如果您需要的话如果希望新的拾取传递来自API，则post请求应返回已创建的对象，否则您可以假设，由于API返回成功，因此对象已创建，因此您只需根据已传递给API的参数创建一个数组
this.setState(() => ({ pickup_deliveries }));

this.setState((prevState) => ({
  pickup_deliveries: [...prevState.pickup_deliveries, response.data]);