Question

在某些情况下，似乎React不会将状态更改传播到子组件中。

最低示例

我试图将我观察到的行为归结为我能找到的最小的测试用例，但它仍然很大。对于那个很抱歉。

class Inner extends React.Component<{ value: number }, { value: number }> {
  constructor(props: { value: number }) {
    super(props);

    this.state = { value: props.value };
  }

  render() {
    return <span> { this.state.value } </span>
  }
}

class Test extends React.Component<{}, { value: number }> {
  constructor(props: {}) {
    super(props);

    this.state = { value: 0 };

    setTimeout(() => { this.setState({ value: 1 }); }, 500);
  }

  render() {
    return <span>
      <Inner value={ this.state.value } />
    </span>;
  }
}

React.render(<Test />, document.getElementById('somediv'));

快速摘要

测试有＆＃34;值＆＃34;在它的状态中，它被显示传入并由其内部组件显示，＆＃34;内部＆＃34;。

在Inside Test的构造函数方法中，我将状态value设置为0.在500ms后，我将其设置为1.我希望这会将内部显示更改为同时显示1，因为它取决于value中的this.state，但它并不是。{1}}。为什么不呢？

非常奇怪的是，如果我将行return <span> { this.state.value } </span>更改为this.props.value内使用Inner，那么它实际上会更新。当然，我需要在我的应用程序中使用状态，我从中提取了这个例子。

我希望我在这里错过了React的一些基本部分。它是什么？

Answer 1

Inner的构造函数仅在首次创建组件实例时运行一次。

因此，这只会运行一次，而不是每次道具改变时都会运行：

this.state = { value: props.value };

因此，如果您将新道具传递到Inner，this.props.value的值将会改变，但this.state.value的值不会改变。

现在发生这种情况：

超时在setValue上调用Test并更新Test的状态
React重新渲染Test
作为呈现过程的一部分，Test将新的道具值传递给Inner
Inner重新渲染 - 它的道具已经改变，但它的状态却没有。

React.js拒绝注意到更改

1 个答案: