Javascript componentDidMount或componentWillMount-React js中未更新的状态

我试图在componentsDidMount/componentsWillMount中调用addRow函数，但在addRow上没有任何状态得到更新。 我试图在onload事件中加载行。我还没有反应过来。非常感谢您的任何提示

componentDidMount(){
  let users = X.users;
  for (let i = 0; i < users.length; i++) {
    this.addRow();
  };
}

addRow() {
  this.setState({testState : "I am updated"});
  console.log("State : "+ this.state.testState);
  const inputList = this.state.inputList;
  const index = this.state.index;
  let rows = this.state.rows;
  const row = (
    <tr key={ inputList.length } name={ inputList.length }>
      <td><input name={'phone_'+index} type="number" placeholder="Phone Number"  pattern="[0-9]*" inputMode="numeric" ref={inp => this[`phone_${index}`] = inp} key={index} onBlur={(e) => this.validateInput(e, false)}/> </td>
      <td><input name={'fwd_'+index} type="number" placeholder="Foward Phone Number"  pattern="[0-9]*" inputMode="numeric" ref={inp => this[`fwd_${index}`] = inp} key={index} onBlur={(e) => this.validateInput(e, true)}/></td>
      <td id="second-last-child">
        <ButtonGroup>
          <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Remove</Tooltip>}>
          <Button className="config-button" onClick={() => this.removeRow(inputList.length)}><Glyphicon glyph="remove"></Glyphicon></Button>
          </OverlayTrigger>

          <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Save</Tooltip>}>
          <Button className="config-button"><Glyphicon glyph="saved" onClick={ this.handleSubmit }></Glyphicon></Button>
          </OverlayTrigger>

          <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Forward</Tooltip>}>
          <Button className="config-button"><Glyphicon glyph="forward" onClick={ this.addCallFWDNum }></Glyphicon></Button>
          </OverlayTrigger>
        </ButtonGroup>
    </td>
    <td id="forwarded-indicator">
    <label className="switch">
      <input className="activate-checkbox" type="checkbox" value={this.state.isChecked} onChange={this.toggleChange} ref={inp => this[`isAct_${index}`] = inp} key={index} />
      <span className="slider"></span>
    </label>
    </td>
  </tr>
  );
  console.log(index);
  rows.push(row);

  this.setState({
    inputList: inputList.concat(row)
  });
  this.setState({
    index: index+1
  });
},

---

React的

setState

功能是异步的。这意味着当您调用该函数时，它可能不会立即运行。因此，在

addRow（）

的第二行，您可以看到状态实际上还没有改变

如果要在运行某些代码之前等待状态更新，请使用

setState（）

中的可选回调参数，如下所示：

addRow() {
  this.setState({ testState: 'test' }, () => {
    console.log("state updated:", this.state)
    // State is updated in this function
  })

  console.log("state probably not updated:", this.state)
  // State may not have updated yet
}

---

您必须使用箭头函数

（）=>{}

（如我的示例）或

.bind（this）

，以确保

this

在回调函数中仍然引用您的类。

谢谢Sidney！另外，我做了一些非常愚蠢的事情——我没有添加所有行，而是只添加了concat行；）

addRow() {
  this.setState({ testState: 'test' }, () => {
    console.log("state updated:", this.state)
    // State is updated in this function
  })

  console.log("state probably not updated:", this.state)
  // State may not have updated yet
}