Javascript ReactJs：输入值不为'；无法更改，因为使用了Array.map

这是表体：

<tbody>
  {this.state.composantInformation.map(composantInformation => {
    return (
      <tr key={composantInformation.id.toString()}>
        <td>{composantInformation.nom_composant}</td>
        <td>{composantInformation.categorie}</td>
        <td>{composantInformation.description}</td>
        <td>{composantInformation.ref}</td>
        <td>
          <NumericInput
            min={0}
            max={100}
            value={composantInformation.qte}
            onChange={this.onQuantiteChange}
          />
        </td>
      </tr>
    );
  })}
</tbody>;

这是发出后端API请求的地方：

componentDidMount() {
  getProduitDataFromDB()
    .then(result => {
      this.setState({
        produitInformation: result.data
      });
    })
    .catch(error => console.error("(1) Outside error:", error));
}

这就是结果：

在最后一列中，当我单击递增/递减时，值会增加，然后返回到0。
我相信这与我正在使用

map

显示表数据的事实有关

{
  this.state.produitInformation.map(produitInformation => {
    return (
      <tr
        key={produitInformation.id.toString()}
        produitid={produitInformation.id.toString()}
        onClick={this.onTableRowClick}
      >
        <td>{produitInformation.nom_produit}</td>
        <td>{produitInformation.prix}</td>
        <td>{produitInformation.categorie}</td>
        <td>{produitInformation.description}</td>
        <td>
          <NumericInput
            min={0}
            max={100}
            value={produitInformation.qte}
            tablerow={5}
            onChange={this.onQuantiteChange}
          />
        </td>
      </tr>
    );
  });
}

{
this.state.produitInformation.map（produitInformation=>{
返回(
{produitInformation.nom_produit}
{produitInformation.prix}
{produitInformation.categorie}
{produitInformation.description}
);
});
}

---

因为

数值输入

中的

值

与状态值没有直接关联。你知道如何解决这个问题吗？

你需要为数字输入值创建一个状态，一旦更改了该数字输入，你需要设置新的状态，以便该值更改

你需要更新发生增加的特定数组元素，因此需要两个参数，一个是使用id标识元素，另一个是价值

onQuantiteChange(id, value){

const newData = this.state.produitInformation.map(d => {
if(d.id === id) {
return {...d, qte: value}
}
return d;
})
this.setState({produitInformation: newData})
}

也改变

<td>
                            <NumericInput
                              min={0}
                              max={100}
                              value={produitInformation.qte}
                              tablerow={5}
                              onChange={(val) => this.onQuantiteChange(produitInformation.id, val)}
                            />
                          </td>

this.onQuantiteChange（produitInformation.id，val）}
/>

<td>
                            <NumericInput
                              min={0}
                              max={100}
                              value={produitInformation.qte}
                              tablerow={5}
                              onChange={(val) => this.onQuantiteChange(produitInformation.id, val)}
                            />
                          </td>