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

Question

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

这是我的 post 请求（数据正确持久化）：

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，我的组件重新呈现和显示新提交的数据不会有问题。

对不起，如果这让我感到困惑，但我在这里不知所措。

Answer 1

改变

this.setState({ pickup_deliveries });

至

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

基于回调setState。

Answer 2

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

如果未检测到状态更改，setState 不会re-render

第二个 当你更新一个状态并使用你不应该访问的状态的旧值时重要的事情this.state，你的代码应该看起来像这样：

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

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

关于此主题的更多信息https://reactjs.org/docs/state-and-lifecycle.html 引用:

State Updates May Be Asynchronous

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Third (workaround) 通常要记住的一种解决方法是将 'lastRequestTimestamp' 之类的参数添加到state 强制状态更改，特别是当您处理更新状态中的数组或对象时，此解决方法只是为了向您自己证明您正在改变不是状态更改的数组，因为数组引用仍然相同，但是你不应该使用这个解决方法除了调试...

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

Component is not re-rendering on form submission. It only re-renders on a full page refresh

rails-api

reactjs

axios