时间戳

首页 > 解决方案 > Reactjs：setstate 渲染顺序问题

javascript - Reactjs：setstate 渲染顺序问题

问题描述

我是使用 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它会无限循环。

标签： javascriptreactjssetstate

解决方案

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

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

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

推荐阅读