Question

总而言之，我正在通过axios提交POST请求，而我最困难的时间是要弄清楚为什么它不重新渲染正在显示新添加的数据的组件（所有这些都在发生）。 / p>

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

addNewLoad = (pickup_date, pickup_location, rate, delivery_date, delivery_location, loaded_miles, deadhead_miles, local, delivery_id) => {
        let config = {
            headers: {
                'Content-Type': 'application/json; charset=utf-8', "Accepts": "application/json",
            }
        }
     const instance = axios.create({baseURL: 'http://localhost:3001'})
      instance.post('/api/v1/pickup_deliveries', { pickup_date, pickup_location, rate, delivery_date, delivery_location, loaded_miles, deadhead_miles, local, delivery_id}, config)
        .then(response => {
        console.log(response)
          const pickup_deliveries = [ ...this.state.pickup_deliveries, response.data ]
          this.setState({pickup_deliveries})
        })
        .catch(error => {
            console.log(error)
        })
    }

这是我组件的状态：

    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({pickup_deliveries})时，我希望组件重新呈现。不仅如此，而且在该组件中，我目前正在从Rails API中提取所有数据，并使用所述数据在该组件中显示。我认为this.setState({pickup_deliveries})和重新渲染该数据来自的父组件之间是this.props.apiData，我的组件重新渲染和显示新提交的数据不会有问题。 / p>

抱歉，这很令人困惑，但是我在这里茫然。

Answer 1

首先是要检查您是否没有从API获取空数组（请检查网络标签）。在那种情况下，您实际上并没有更改数组，而是运行具有相同值的setState ...

如果未检测到状态更改，

setState不会重新呈现

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

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

因为状态更新是异步的，所以您在更新状态时永远不要依赖this.state，因为您可能会获得比要更新的状态更旧的状态。

有关此主题的更多信息https://reactjs.org/docs/state-and-lifecycle.html 报价：

状态更新可能是异步的

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

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

通常要记住的

第三（解决方法）是一种解决方法，可以在状态中添加“ lastRequestTimestamp”之类的参数以强制状态更改，特别是当您处于处理状态中的更新数组或对象，此解决方法只是向自己证明您正在对数组进行突变，这不是状态更改，因为数组引用仍然相同，，但您不应使用此解决方法，除非调试...

Answer 2

更改

this.setState({ pickup_deliveries });

到

this.setState(() => ({ pickup_deliveries }));

用于基于回调的setState。

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

2 个答案: