javascript - 功能 setState 和道具

Question

我很清楚为什么我们需要功能 setState 以及它是如何工作的，例如

this.setState((prevState, props) => ...);

如上所述，您将先前的状态作为参数。

props不过在论据 中也要注意。在这里，我遇到了关于功能 setState 中的道具的解释：

此外，在更新依赖于 props 时也适用。当从父组件接收到的 props 在异步执行开始之前发生变化时，这些也可能变得陈旧。因此，this.setState() 中的函数将 props 的第二个参数作为第二个参数。

然而，这个解释仍然没有点击到我。

有人可以举一个“道具”如何变得陈旧的例子吗？例如，可能是一个代码片段，它在使用 this.props 而不是 setState 采用的回调函数的参数中指定的“props”时演示了一个错误？

换句话说，我不明白为什么props在功能 setState 中需要参数，并且很高兴看到一个为什么需要它的示例。

标签： javascriptreactjs

Answer 1

class Children extends React.Component {
  state = {
    initial: true,
  };

  onClick = () => {
    this.props.handler();
    console.log(this.state.initial, this.props.initial); // true true
    this.setState((state, props) => {
      console.log(state.initial, props.initial); // true false
      console.log(this.state.initial, this.props.initial); // true true
    });
  };
  render() {
    console.log("render children", this.state.initial, this.props.initial);
    return <div onClick={this.onClick}>Click me</div>
  }
}

class Hello extends React.Component {
  state = {
    initial: true,
  };

  handler = () => {
    this.setState({initial: false});
  }
  render() {
    console.log("render parent", this.state.initial);
    return <Children initial={this.state.initial} handler={this.handler} />
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在这个例子中，孩子们将调用处理程序，该处理程序将改变父状态并更新他自己的状态。在回调中，您可以看到 props 和 this.props 不同：props 是新值，而 this.props 是陈旧的。

演示在这里