如何在React JS中的对象数组中添加对象

Question

我是新来的反应。 在这里，我已经尝试过了。

onaddRow(e, id) {
        const addData = this.props.lowData;
        const tempObj = {
            id: 'L1',
            technologyId: 0,
            technology: '',
            type: '',
            numberOfQuestions: ''
        }
        addData.push(tempObj);
    }

this.props.lowData是对象的数组。 因此，我想在this中添加一个对象。

所以，我尝试了以下方法，但没有成功，有人可以建议我该怎么做吗？

Answer 1

您还可以获取更新的数组usign（传播） ...

onaddRow(e, id) {  
    const tempObj = {
        id: 'L1',
        technologyId: 0,
        technology: '',
        type: '',
        numberOfQuestions: ''
    }
    const addData = [...this.props.lowData, tempObj ];
    console.log(addData)
}

//根据您在评论中的要求。 如果要从数组中删除项目，可以这样。

let updatedArrray = yourArray.filter(i => {
  return i.id != passYourIdHere;
});
console.log(updatedArrray);

因此，这里我们返回除匹配对象之外的所有其他对象，最后将它们收集在updatedArrray中。

Answer 2

通过使用addData.push（），您可以将对象有效地添加到数组中（如果props.lowData确实是对象数组），但是鉴于您位于React环境中，因此应在此之后执行。setState（{lowData：addData }）以触​​发组件的重新呈现。

Answer 3

React使用单向数据流（从父级到子级）。 在您的示例中，您从道具中收到了父母的数据。 要添加新对象，您必须传递来自上级的回调，这会将其添加到上级状态。

Child component:
onAddRow(e, id) {  
    const tempObj = {
        id: 'L1',
        technologyId: 0,
        technology: '',
        type: '',
        numberOfQuestions: ''
    }
    this.props.onAddRow(tempObj)
}

Parent:

onAddRow = (newObj) => {
 this.setState({
   lowData: [...this.state.lowData, newObj]
 })
}
render() {

<ChildComponent data={this.state.lowData} onAddRow={this.onAddRow} />

}