Javascript 使用setState将对象数组添加到对象的自数组中

如何为对象数组添加新行

class App extends React.Component {
  state = {
    inputs: [{
      name: 'firstname',
      value: ''
    },{
      name: 'lastname',
      value: ''
    }]
  }
  addRow = () => {
    //what to do here
  }
  render() {
    return(
      <div>
        {this.state.inputs.map(input => <input placeholder={input.name} type="text" />)}
         <button onClick={this.addRow}>add row</button>
        </div>
    )
  }
}

类应用程序扩展了React.Component{
状态={
投入：[{
姓名：'firstname'，
值：“”
},{
名称：“lastname”，
值：“”
}]
}
addRow=（）=>{
//在这里做什么
}
render（）{
返回(
{this.state.inputs.map（input=>）}
添加行
)
}
}

---

在这种情况下，我必须使用lodash的deepClone吗？

您不一定需要复制。可以在阵列中重复使用相同的对象：

this.setState({inputs: [...this.state.inputs, {name: 'foo', value: ''}]});

---

看看我创建的沙盒。

这里是我使用扩展运算符复制现有的输入数组，并将数据插入该数组

addRow = () => {
    const inputs = [...this.state.inputs];
    inputs.push({
      name: "dummyname",
      value: ""
    });
    this.setState({
      inputs
    });
  };

---

首先，必须将状态设置为与下面相同的状态

要添加新行，可以使用spread运算符

const newState = [...this.state.inputs, newRow];

我重写了你的代码，这样你就可以看它并试着理解它

类应用程序扩展了React.Component{
状态={
投入：[
{
名字：“易卜拉欣”，
姓：“Doe”
},
{
名字：“穆罕默德”，
姓：“乔恩”
}
],
inputFirstname:“”，
InputLastName:“”
};
handleOnChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
addRow=e=>{
e、 预防默认值（）；
常数newRow={
名字：this.state.inputFirstname，
lastname:this.state.InputLastName
};
const newState=[…this.state.inputs，newRow]；
这是我的国家({
输入：newState，
inputFirstname:“”，
InputLastName:“”
});
};
render（）{
返回(
{this.state.inputs.map（输入=>(
))}
添加行
);
}
}
const rootElement=document.getElementById（'root'）；
render（，rootElement）

看一看，只是提醒一下，状态是不可变的，可能是重复的，但像这样的硬编码会有两次声明，不是吗？如果数据很大怎么办？为什么会有变异状态的投票？它不能是
this.setState（{inputs:[…this.state.inputs，{name:'etc'，value:'}]}）？