Question

在React中，当你想根据状态的先前值更新状态时，由于setState方法的某些异步特性，你需要传入一个函数作为第一个参数，以便当时状态实际上正在更新setState可以访问最新版本的状态。 e.g。

const setStateCallback = prevState => {
  return {myInteger: prevState.myInteger + this.props.step};
}

this.setState(setStateCallback);

我的问题是，如果状态是唯一可能过时的数据，那么此函数中的props参数是什么意思。为什么不使用

const setStateCallback =  prevState => {
  return {myInteger: prevState.myInteger + this.props.step};
}

this.setState(setStateCallback);

我假设setState正在运行的方式是setStateCallback被存储，并且在React准备好处理所有setState次调用后将被调用。那时，是的，我需要访问在此过程中进行其他setState调用期间发生的状态更新。但是，在调用setStateCallback时，this.props.step同时对this.props.step所做的任何更新仍可在this.props上使用，因为我引用了const step = this.props.step const setStateCallback = prevState => { return {myInteger: prevState.myInteger + step}; } this.setState(setStateCallback);对象。如果我这样做了

step

这是一个问题，因为props的值（假设这是一个数字或字符串）不再从道具对象引用，并且可能已过期。

因此，假设我的假设是正确的，那么访问回调setStateCallback的{{1}}参数似乎是不必要的。

更新

正如Brad Bumbalough所指出的，以及我自己下面的一些额外证据，props arg确实是必要的。

这一发现的含义意味着，在自定义类方法中访问this.state或this.props时，必须小心谨慎。例如，对于在setState回调中调用的任何自定义类方法，您需要确保这些方法中的任何引用或后续类方法中的引用都来自state和props作为参数，不要引用this.props或this.state。

Answer 1

我认为他们的观点是一切都是异步的。因此，如果您明确依赖var counter = 3; var factorial = 1; do { console.log("Counter value:" + counter); factorial *= counter; } while(--counter); console.log(factorial);进行状态更改，则无法100％确定props呼叫在首次排队后this.props未发生变化。

这可能是一个问题的可能生命周期......

初始渲染。
异步调用以从服务器获取数据。
用户互动会触发取决于当前道具（setState）的setState来电。这将使用当前状态/ props立即评估，并将结果存储为state属性的新值。

prevState.myInteger + props.step来电已排队。

异步调用返回并更新父组件/存储，触发要更改的道具。
处理并应用
setState调用，但用于生成存储状态数据的道具现在与用户可以看到的当前道具不同步，从而导致混乱，混乱和WW3。好吧，我可能在那里夸大了。

关键是可能更改。 99％的时间您可能不需要在通话中钻取此特定内容。但是，如果您需要它，那么电话就在那里。

如果有其他人在看，这里是link to the docs on this。


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

因为this.props和this.state可以异步更新，所以不应该依赖它们的值来计算下一个状态。

要修复它，请使用第二种形式的setState（）接受函数而不是对象。该函数将接收先前的状态作为第一个参数，并将更新作为第二个参数应用于道具。

setState异步设置函数中的props参数有什么意义

1 个答案: