ReactJs: входное значение не изменяется, потому что из-за использования Array.map - PullRequest
Новая
       4

ReactJs: входное значение не изменяется, потому что из-за использования Array.map

0 голосов
/ 02 марта 2020

Это тело таблицы: 

<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>;

Это состояние: 

this.state = {
  produitInformation: [],
  composantInformation: [],
  produitId: 0,
  produitQte: 0
};

Здесь выполняется запрос Backend API: 

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

И вот результат:
enter image description here

В последнем столбце, когда я нажимаю на Увеличение / Уменьшение, значение увеличивается, а затем возвращается к 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>
    );
  });
}

Поскольку value внутри NumericInput не связано напрямую со значением состояния. Есть идеи, как это решить?

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Вам необходимо обновить указанный элемент массива c, в котором произошло увеличение, поэтому нужны два параметра: один для идентификации элемента с использованием идентификатора, а другой - значение 

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>
0 голосов
/ 02 марта 2020

вам нужно создать состояние для значения NumericInput для и onChange для этого NumericInput, вам нужно установить новый порядок состояний для значения, которое нужно изменить

...