React - 无法更改输入中的数字

Question

我正在使用 axios get 的 API 中的数据映射表。在表中，我的输入字段具有来自 axios 数据的值，但是当我输入此输入值时，它不会改变。例如，如果输入是数据中的 8 号，而我选择输入并且输入中的类型 5 仍然是 8 号。

如何解锁输入框？

axios 代码

axios
  .get("http://10.10.10.27/api?", {params : {rok : this.state.rok, idUchwaly : this.state.id}, headers: { 'Authorization' : 'Bearer '+ this.state.token }})
  .then(response =>
    response.data.map(data2 => ({
      IDA: `${data2.id}`,
      Value: `${data2.value}`,


    }))
  )
  .then(data2 => {
    if (data2==''){
      this.setState({ isLoadingdane: false });
    }
    else{
      this.setState({ data2, isLoadingdane: true});
    }
  })
  .catch(error => this.setState({ error }));

}

渲染中的映射表

    <tbody className="row">
{ this.state.isLoadingdane ? (

 data2.map(user => {
  const { IDA, Value } = user;
  return (
      <tr id={IDA}>
        <td ><p>{IDA}</p></td>
        
        <td >
        <input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>
        </td>
        <td >
          <button  onClick={() => this.edit(user)} type="button" className="btn btn-light">Zapisz</button>
        </td>
        
      </tr>

      );

Post 方法工作，更改保存在服务器上

Answer 1

您需要从data2 数组中找到当前修改的对象，并将修改后的Value 替换为新值。

输入值永远是数字 8，因为您从 data2 对象获取输入值，该对象在更改时保持不变：

const {IDA, Value} = user;
<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>```

只有在onChange期间找到并修改data2对象中的值，才能看到新的值反映。

示例：

<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={(e) => this.ChangeWniosek(e)} value={Value} ></input>

在函数中：

ChangeWniosek = (e) => {
  let { data2 } = this.state;
  data2 = data2.map(obj => {
    if (obj.IDA === e.target.id) {
      obj.Value = event.target.value
    }
    return obj;
  });
  this.setState({
    data2,
    Value: event.target.value
  });
}

让我知道这是否有效。