这是在父组件

中

  handleSubmit = function(e){
              e.preventDefault();
            this.setState({table: true});
            this.setState({rows: [
              {
                id: 1,
                name: this.state.name,
                email: this.state.email,
                phone: this.state.phone
              }
            ]
          } , () => {console.log(this.state.rows)});
            this.setState({updateInTable: true} , () => {console.log(this.state.updateInTable)})
            this.setState({submit: false});
          }

这是在子组件

中

  componentDidUpdate() {
          console.log('From table '+this.props.updateInTable);
          if(this.props.updateInTable){
            console.log('Coming from table '+this.props.rows);
          }
        }

我发送这些作为道具

           <Table
                 table={this.state.table}
                 name={this.state.name}
                 rows={this.state.rows}
                 updateInTable={this.state.updateInTable}
                 />

这些是从控制台

返回的

从表格

来自表格

来自表[object Object]

[对象]

真

我希望首先打印父组件中的[Object]，true，然后从表格false，From table true

CodePen链接：https://codepen.io/anon/pen/ZXOrPE

Answer 1

无法保证更改子组件时会立即更新。实际上，更新通常是为了性能而进行批处理。

在同一个函数中连续多次调用setState被认为是一种不好的做法，您可以/应该实际将整个过程分组到一个setState调用中

Answer 2

扩展Mario F的回答，React documentation确实说明了：

setState()并不总是立即更新组件。有可能批量或推迟更新，直到稍后。这使得阅读this.state 在致电setState()潜在的陷阱之后。

相反，请尝试在一次通话中设置您的状态......

handleSubmit = function(e) {
  e.preventDefault();

  this.setState({
    table: true,
    rows: [{
      id: 1,
      name: this.state.name,
      email: this.state.email,
      phone: this.state.phone
    }],
    updateInTable: true,
    submit: false
  });
}

如果确实需要同步更新状态，请考虑使用componentDidUpdate或setState回调，保证在按照提供的文档中所述应用更新后触发。 / p>

Answer 3

除了Mario F和T Porter所说的，多个setState都在React中进行批处理。应将多个setStates组合为一个。但在你的情况下，即使我们将多个setState组合成一个输出仍然相同。这是因为子组件中的componentDidUpdate（）方法在onSubmit上被调用两次。

onClick Submit按钮按以下顺序调用两个函数：

submitClic k = function（）{ this.setState（{cancel：false}）; }

当调用submitClick时，第一次调用componentDidUpdate（）并且 From table false 被记录为this.props.updateInTable此时为false。

handleSubmit （当提交事件冒泡到表单时）

当调用handleSubmit时，会批处理多个setStates，并再次调用componentDidUpdate（），此时this.props.updateInTable为true。因此，记录的输出是：

来自表格

来自表格[object Object]

setState回调总是在子组件的生命周期完成后执行，这就是为什么最后会安慰下载的。

<强> [对象]

true

我希望它能回答你的问题。

在子组件获取状态为props之前呈现父组件状态的麻烦

这是在父组件

这些是从控制台

3 个答案: