React父组件状态更新未同步至子组件问题及代码示例求解

嘿，这个问题我太熟悉了！咱们先拆解下你代码里的核心问题：你把React组件实例（<Child />）直接存在父组件的state里了，这完全搞错了React状态管理的思路——state应该用来存数据，而不是组件或者JSX元素。

为什么你的代码不生效？ #

你在componentDidMount里只创建了一次<Child x={self.state.x} />并存在currentScreen中，这时候它拿到的x是当时state里的初始值（也就是1）。之后定时器每隔一秒更新state.x，但state.currentScreen并没有跟着重新生成新的<Child />组件，所以子组件一直显示的是第一次创建时的x值，自然不会同步更新。

正确的实现方式 #

咱们把组件渲染的逻辑放回render方法里，让React自己去处理组件的更新——只要父组件的state变化，render就会重新执行，子组件就能拿到最新的props。另外别忘了在组件卸载时清理定时器，避免内存泄漏。

修改后的完整代码如下：

class Child extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        {this.props.x}
      </div>
    )
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props)
    // 只在state里存数据，不要存组件
    this.state = {x: 1, intervalID: 0}
  }

  componentDidMount() {
    const intervalID = setInterval(() => {
      // 使用函数式setState，确保拿到最新的state值
      this.setState(prevState => ({x: prevState.x + 1}))
    }, 1000)
    this.setState({intervalID})
  }

  // 组件卸载时清理定时器
  componentWillUnmount() {
    clearInterval(this.state.intervalID)
  }

  render() {
    // 直接在render里渲染Child，传递最新的state.x
    return (
      <div>
        <Child x={this.state.x} />
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

额外优化点 #

我还把setState改成了函数式更新：this.setState(prevState => ({x: prevState.x + 1}))，这样可以确保每次更新都是基于最新的state值，避免因为setState的异步特性导致的数值错误。

内容的提问来源于stack exchange，提问作者Alex