как обновить рендер с новым состоянием

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 не знает, что вы обновили состояние.

При обновлении состояний с помощью реакции используйте 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 ()

официальные документы

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
      },
    ]
  });
}