如何使用新状态更新渲染

Question

向数组中插入新值有效，但我希望在渲染中更新表格

this.state = {
materials: [
                {
                    material: {id: 1, label: 'm1'},
                    quantity: 2,
                    unitPrice: 12,
                    total: 0
                },
                {
                    material:  {id: 2, label: 'm2'},
                    quantity: 4,
                    unitPrice: 15,
                    total: 1
                }
            ]
}

handleOnClick(e){
        this.state.materials.push(this.state.selectedMaterialUnitID, this.state.quantity, this.state.unitPrice, this.state.total);
        console.log(this.state.materials); // this worked fine

    }

<tbody>
{materials.map((obj) => {return(
    <tr>
        <td >{obj.material.label}</td>
        <td>{obj.quantity}</td>
        <td>{obj.unitPrice}</td>
        <td>{obj.total}</td>
    </tr>
)})}
</tbody>

<Button varient={"light"} onClick={this.handleOnClick}>Add row</Button>

预期结果是表更新并插入新行时

Answer 1

React 不知道你更新了状态。

使用 react 更新状态时，请使用 this.setState(/* new value */)。

您的代码应如下所示：

handleOnClick(e) {
  this.setState({
    // just materials. the other keys will not be affected.
    materials: [
      ...this.state.materials,
      this.state.selectedMaterialUnitID,
      this.state.quantity,
      this.state.unitPrice,
      this.state.total,
    ]
  });

  // this will show the old state now, since updating the state is asynchronous.
  console.log(this.state.materials);
}

如果你想让你的console.log反映更新后的状态，你可以使用setState的第二个参数，像这样：

handleOnClick(e) {
  this.setState({
    materials: [
      ...this.state.materials,
      this.state.selectedMaterialUnitID,
      this.state.quantity,
      this.state.unitPrice,
      this.state.total,
    ]
  },
  (state) => {
    console.log(state.materials);
  }
  );
}

我不确定您的.push 方法将如何处理所有这些额外参数，但我希望您明白这一点。如果要向数组中添加新对象，只需添加适当的分隔符和键即可。

编辑添加：查看此链接，了解为什么不应该直接更新状态：https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

Answer 2

使用设置状态setState() tutorial

official docs

handleOnClick = (e) => {

  this.setState({
    materials: [
      ...this.state.materials,
      // add an object 
      { material: this.state.selectedMaterialUnitID,
      quantity: this.state.quantity,
      unitPrice: this.state.unitPrice,
      total: this.state.total
      },
    ]
  });
}