React 16中父组件Props与子组件State不同步问题求助

嘿，我马上就发现你遇到的核心问题啦！你现在的问题在于：子组件的state只在第一次挂载的时候从props初始化了一次，之后当父组件更新isHidden状态、传递给子组件的isOpen props发生变化时，子组件并没有主动监听这个变化去更新自己的state，所以才会出现props和state不一致的情况。

你之前尝试的异步setState回调是解决setState本身的异步更新问题，而引用传递的问题你也已经排除（因为是布尔值，属于值传递），但这两个都不是当前问题的关键哦。

下面给你两种可行的解决方案：

方案一：直接使用Props，不维护子组件State（首推） #

如果子组件的isHidden状态完全由父组件的props决定，那子组件根本不需要自己存一份state，直接用props就好——这样不仅天然同步，代码还更简洁：

class Parent extends React.Component {
  state = { isHidden: false }
  
  render() {
    console.log('PROPS from PARENT', this.state.isHidden)
    return (
      <div>
        <Child isOpen={this.state.isHidden} />
        <button onClick={this.toggleModal}>Toggle Modal</button>
      </div>
    )
  }
  
  toggleModal = () => this.setState(state => ({isHidden: !state.isHidden}))
}

class Child extends React.Component {
  render() {
    console.log('PROPS of CHILD:', this.props.isOpen)
    return <p hidden={this.props.isOpen}>Hidden:{this.props.isOpen}</p>
  }
}

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

方案二：监听Props变化更新子组件State #

如果你确实需要子组件自己维护state（比如之后有独立修改这个状态的逻辑），那可以用componentDidUpdate生命周期钩子来监听props的变化，当isOpen props和当前state不一致时，更新子组件的state：

class Parent extends React.Component {
  state = { isHidden: false }
  
  render() {
    console.log('PROPS from PARENT', this.state.isHidden)
    return (
      <div>
        <Child isOpen={this.state.isHidden} />
        <button onClick={this.toggleModal}>Toggle Modal</button>
      </div>
    )
  }
  
  toggleModal = () => this.setState(state => ({isHidden: !state.isHidden}))
}

class Child extends React.Component {
  state = { isHidden: this.props.isOpen }
  
  // 监听props变化，更新state
  componentDidUpdate(prevProps) {
    // 只有当props确实变化时才更新，避免触发无限循环
    if (prevProps.isOpen !== this.props.isOpen) {
      this.setState({ isHidden: this.props.isOpen });
    }
  }
  
  render() {
    console.log('STATE of CHILD:',this.state.isHidden)
    return <p hidden={this.state.isHidden}>Hidden:{this.state.isHidden}</p>
  }
}

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

要是你用的是React 16.3及以上版本，也可以用getDerivedStateFromProps这个静态生命周期钩子，但componentDidUpdate对于这种场景来说更直观，代码也更容易理解。

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