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} />

}

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

3 个答案: