javascript - 根据 parent 的 Prop 变化 react child 状态更新

Question

我正在尝试使用 React 实现扫雷。我有一个 Header 组件(未显示)，其中可以更改炸弹的尺寸和数量，因此 App 组件状态(sizeX、sizeY 和 bombNumber) 将被更新，这些值将作为 props 向下发送到 Table 组件。

我的问题是 Table 组件状态依赖于 App 组件的 props 以及 createTable() 方法在 prop 更新时被调用它使用更新的 sizeX 和 sizeY 属性(这当然很好)但出于某种原因它使用了 bombNumber 属性的先前值。

这是正确的方法吗？如果是这样，我错过了什么？

class App extends Component {
  constructor (props) {
  super(props);

  this.state = {
    sizeX: DEFAULT_SIZE,
    sizeY: DEFAULT_SIZE,
    maxBombNumber: DEFAULT_BOMB_NUMBER,
    bombNumber: DEFAULT_BOMB_NUMBER

  }

  updateSize (val, side) {
    this.setState({[side]: val}, function () {
      this.setState({maxBombNumber: this.calculateMaxBombNumber()}, function () {
        if (this.state.maxBombNumber < this.state.bombNumber) {
          this.setState({bombNumber: this.state.maxBombNumber}, function (){
          });
        }
      });
    });
  }

  render() {
    return (
      <div className="App">
        <Table 
          sizeX={this.state.sizeX}
          sizeY={this.state.sizeY}
          bombNumber={this.state.bombNumber}
        />
      </div>
    );
  }
}

表格.js

class Table extends Component {
  constructor (props) {
  super(props);

  this.state = {
    table: this.createTable()
  }

  componentWillReceiveProps(nextProps) {
    this.setState({table: this.createTable()});
  }

  createTable() {
    // function using sizeX, sizeY and bombNumber
  }
}

更新:

如果我更改状态，此处的控制台日志会打印正确的值，但 child 将使用旧值作为 bombNumber。

updateSize (val, side) {
  this.setState({[side]: val}, function () {
    this.setState({maxBombNumber: this.calculateMaxBombNumber()}, function () {
      if (this.state.maxBombNumber < this.state.bombNumber) {
        this.setState({bombNumber: this.state.maxBombNumber}, function (){
          console.log(this.state);
        });
      }
    });
  });
}

Answer 1

尝试将所有 setState 调用包装在一个中:

updateSize(val, side) {
    const maxBombNumber = this.calculateMaxBombNumber();
    const bombNumber = maxBombNumber < this.state.bombNumber ? maxBombNumber : this.state.bombNumber;
    this.setState({ 
        [side]: val,
        maxBombNumber,
        bombNumber
    });
}

更新:

 componentWillReceiveProps(nextProps) {
    this.setState({table: this.createTable()});
  }

当 Table 组件从父 App 获取新的 props –> componentWillReceiveProps 执行并且 this.createTable() 方法使用以前的值而不是 nextProps 中的值。通过这种方式，您应该通过 createTable 的参数正确地给它例如。检查这个example .

更新 2:

做Table组件-dump(无状态)，只在父组件App中使用state会更好。只需将 createTable 方法移至 App 即可。

或者您可以在 Table 的 render 方法中调用 createTable。