首页 文章

功能setState和道具

提问于
浏览 次
5

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

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

您可以将上一个状态作为上述参数 .

但是在论证中也要注意 props . Here我在功能setState中遇到了关于道具的解释：

此外，当更新依赖于道具时，它也适用 . 当异步执行踢出之前，来自父组件的收到的道具已经改变时，这些也可能变得陈旧 . 因此，this.setState（）中的函数获取props的第二个参数 .

但是，这个解释仍然没有点击给我 .

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

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

javascript reactjs

2 回答

  • 0
    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

    回复于
  • 2

    国家可能变得陈旧的方式也适用于道具 . 例如，有一个声明：

    this.setState((prevState, props) => ({foo: prevState.x + props.y} ));

    在异步setState执行开始之前，传递给组件的prop x 由其父组件从1 - > 2更新 .

    如果使用了 this.props 而不是props，则该函数将使用旧的props值（在setState调用时的值）执行 . 但是当使用函数setState时，异步执行时的props将始终是当时的最新道具 .

    回复于

相关问题