Reactjs：如何更改已经分发到子组件的父组件的道具数据？

Question

我只是创建一个项目并为一个页面使用多个组件，并通过使用道具将数据传递给每个组件。问题是，当我已经使用道具将数据从父组件更改为子组件并且我已经更新了父组件的数据时，子组件仍然使用旧数据。 例子是这样的：

class Child extends Component{
  constructor(props){
    super(props);
    this.state = {
      variabel : props.variable
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.variable}</h1>
      </div>
    )
  }
}


class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
      variabel : 'Hello'
    }
  }
  render() {
    return (
      <div>
        <Child variable={this.state.variable} />
      </div>
    )
  }
}

所以，当我运行页面并更新父组件中的variabel 状态时，子组件仍然显示旧值。如何使其更新为父组件数据？或者我必须在这种情况下使用 Redux？

Answer 1

一般来说，您只想将一个特定的状态保存在一个地方。如果你在Child的构造函数中重新赋值，它不会在父状态更新时更新。所以像这样的模式应该可以工作：

class Child extends Component{
  // Note that no constructor is needed as you are not initializing any state or binding any methods.    
  render() {
    return (
      <div>
        <h1>{this.props.variable}</h1>
      </div>
    )
  }
}


class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
      variable : 'Hello'
    }
  }
  render() {
    return (
      <div>
        <Child variable={this.state.variable} />
      </div>
    )
  }
}

事实上，React docs for constructor 中有一条关于不使用 props 初始化状态的警告说明。

Answer 2

Mitch Lillie 的答案是正确的。你应该只有一个事实来源。 一般来说，将状态保存在依赖于状态的组件的最近共同祖先中是一个好主意。然后你把道具传下来。

但是，如果您需要在子状态下保留 prop 的副本，则应使用 React provides 的生命周期。

Codepen Live Demo

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      variable: props.variable,
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.variable !== prevState.variable) {
      this.setState({
        variable: this.props.variable,
      });
    }
  }

  render() {
    const varState = this.state.variable;
    const varProps = this.props.variable;

    return (
      <div>
        Child props: {varProps}
        <br />
        Child state: {varState}
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);

    setInterval(this.updateTime, 1000); // refresh every second

    this.state = {
      variable: new Date().toLocaleString(),
    };
  }

  updateTime = () => {
    this.setState({
      variable: new Date().toLocaleString(),
    });
  }

  render() {
    const time = this.state.variable;

    return (
      <div>
        <div>
          Parent: {time}
        </div>
        <Child variable={time} />
      </div>
    );
  }
}

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