Question

我有8个网格框，其中这8个框具有4个属性

id, name, age, location

id是可编辑的，而其他文本是具有Textfield的只读数据，因此我可以根据所选的ID设置值。

现在onChange事件将传递两个参数(event,index)

例如：

网格框1： event, "0" 网格2： event, "1" 网格框3： event, "2" ...... ......

所以，我硬编码，并且具有数组类型状态变量

this.state={
 personData:[]
}

 handlePersonId = (event, index) =>{

      const { personData } = this.state;

      personData.push({id:'', name:'', age:'', location:''});
      personData[index].id=event.target.value;
      this.setState(this.state.personData);
    }

如果我按顺序插入并插入数据，则工作正常，但是当我为网格框2、3、4，... 8输入id时，会出现错误，因为我按顺序而不是在特定索引处推送属性因此我得到 undefined 。

预期输出：：如果我在网格框5中输入，则传递索引 4 ，事件目标值为 23

[{}，{}，{}，{}，{id：'23'，名称：'Omkar'，年龄：'22'，位置：'usa'}]

Answer 1

如果我理解正确，则您希望：

根据id对象中的数据更新personData数组中现有“人”项目的event
在index的{{1}}处创建一个新的“人”（如果不存在）
一旦调用personData函数，确保personData数组中（index之前）中的项目至少被初始化为空对象

要实现这一目标，您可以实现handlePersonId()，如下所示/在此记录：

handlePersonId()

数据将以特定索引存储在数组中

1 个答案: