Reactjs：setstate 渲染顺序问题

Question

我是使用 reactjs 的新手。 我正在使用带有 onChange 句柄的 Select 元素。我使用 setState 保存选定的值：productFilterChosenValue。 然后用我的按钮“onClick”事件上的handleClick，我做

this.setState({
  productFilterChosenValue: this.state.productFilterValue,
});

所以我让 productFilterChoseValue 仅在单击时使用当前 Select 值更新他的值。 它工作正常，因为如果我在我的 render() 函数中输入{this.state.productFilterValue}，那么它只会在按钮单击时显示值变化。

但是如果我在底部添加一个组件（我自己的组件），给它作为 prop 相同的值

<FetchedTableGrid
     apiRoute={
       this.state.productFilterChosenValue
     }
/>

它只会在点击 2 次后更新。因此，我打印了我的值并正常工作，并且与第二次单击时更改状态的 prop 值相同。

在我的 FetchedTableGrid 组件中，我已将 console.log(this.props); 放入尝试 componentDidMount 和 componentWillReceiveProps 得到相同的错误。如果我使用componentWillUpdate 或componentDidUpdate，它会无限循环。

Answer 1

你不能这样做。问题是，如果您设置状态，则 state 会更新，并且由于 setState 函数显式依赖于 state 它会被召回。因此是一个无限循环。

您需要做的是将先前的值作为输入传递给setState：

this.setState((prevState) => ({
  productFilterChosenValue: prevState.productFilterValue,
}));