Question

我知道我们为什么需要功能setState及其工作原理，例如

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

您将之前的状态作为参数获取。

但是，在参数中也要注意props。 Here我在功能setState中遇到了有关道具的解释：

此外，当更新取决于道具时，它也适用。这些从父母那里收到的道具也会变得过时异步执行开始之前，组件已更改。因此，this.setState（）中的函数作为第二个参数道具。

但是，这种解释仍然没有被我点击。

有人可以举一个例子，说明“道具”如何过时吗？例如也许是一个代码片段，在使用this.props而不是setState接受的回调函数的参数中指定的“ props”时，会演示一个错误？

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

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是陈旧的。

Demo here

Answer 2

状态变得过时的方式也适用于道具。例如，说有一条声明：

In: df2.head()
Out:
                                fpc
read_month trading_block           
1          0              37.501837
           1              45.750000
2          0              35.531818
           1              41.550000
3          0              28.348427
           1              35.900000
4          0              26.250870
           1              34.150000
5          0              23.599388
           1              34.550000
6          0              25.617027
           1              38.670000
7          0              27.531765
           1              42.050000
8          0              26.628298
           1              40.400000
9          0              25.201923
           1              36.500000
10         0              25.299149
           1              35.250000
11         0              25.349091
           1              34.300000
12         0              28.249623
           1              35.500000

并且在异步setState执行开始之前，传递给该组件的prop this.setState((prevState, props) => ({foo: prevState.x + props.y} ));由其父组件从1-> 2更新。

如果使用x代替props，则该函数将使用props的旧值（setState调用时的值）执行。但是，由于使用了setState功能，异步执行时的道具将始终是当时的最新道具。

功能setState和道具

2 个答案: