react中父層變量傳入子層，改變父層變量，子層變量沒(méi)變

// Father.js
class Father extends Component {
  constructor(props){
    super(props);
    this.state = {
      reset: 'unreset',
      father: {
        name:'father'
      }
    };
    this.resetData = this.resetData.bind(this);
  }
  resetData () {
    this.setState({
      father: {
        name:'father 2'
      }
    });
  }
  render() {
    return (
      <div className="App">
        <Child father={this.state.father} resetData={this.resetData}/>
      </div>
    );
  }
}
export default Father;

// Child.js
class Child extends Component {
  constructor(props){
    super(props);
    const {father} = this.props;
    this.state = {
      isChange: 'unChange',
      father: father,
    };
    this.change = this.change.bind(this);
  }
  change () {
    this.setState({
      isChange: 'change',
    });
    setTimeout(this.props.resetData,2000);
  }
  render() {
    return (
      <div className="App" onClick={this.change}>
        {this.state.isChange}
        <br/>
        {this.props.father.name}
        <br/>
        {this.state.father.name}
      </div>
    );
  }
}
export default Child;

為什么點(diǎn)擊之后只有一個(gè)改變？
點(diǎn)擊前
圖片描述
點(diǎn)擊后

回答

編輯回答

不討喜

1.兩個(gè)father變量都是引用類型，但是父組件的resetData直接改變了father的地址，子組件引用的仍然是舊的father

2.你只在構(gòu)造函數(shù)內(nèi)把props.father的值賦給了state.father，后面隨著props.father的改變，state.father并不會(huì)主動(dòng)響應(yīng)，原因見(jiàn)上一點(diǎn)

3.解決方法有兩種：
1)全都用props.father
2)添加componentWillReceiveProps函數(shù)：

componentWillReceiveProps = (nextProps) => {
  this.setState({
    father: nextProps.father
  })
}

2018年2月11日 08:50

編輯回答

獨(dú)白

1.你在子組件里把父組件傳過(guò)來(lái)的props用state緩存起來(lái)了，由于父組件屬性更新的時(shí)候子組件不會(huì)重新渲染，不會(huì)再走構(gòu)造函數(shù)，所以子組件的state不會(huì)和父組件的props保持同步，這個(gè)時(shí)候你需要在componentWillReceiveProps(nextProps) 里去處理
2.也可以不緩存到state里，直接在render函數(shù)里用父組件傳過(guò)來(lái)的props

2017年10月15日 21:04

編輯回答