javascript - 我如何在对象数组中设置状态从表单获取用户输入

Question

我在表单中有三个输入字段和两个按钮添加问题并提交:在前两个字段中，用户可以在第三个字段中输入一次值，用户应该能够通过单击添加问题输入多个值或多个问题，最后当用户提交表单时，它应该设置状态

<input type="text" name="intentName" />
<input type="text" name="Description" />
<input type="text" name="ques" /> 
    state={
        data:[
            {"id":1,"intentName":"getPhoneNo","Description":"getting users phone no","ques":[{"q1":"how can i get users phone no"},{"q2":"give me phone number"}]},
            ]
          }

我想设置状态并将项目添加到问题例如:我想添加 {"id":2,"intentName":"getWifi","Description":"getting users phone no","ques":[{"q1":"how can i获取用户 wifi 密码"},{"q2":"给我 wifi 密码"}]}

Answer 1

将回调传递给 this.setState 以获取先前的 data 并添加新对象，例如:

data: [...prevState.data, obj]

片段:

/*
const state = {
  data: [
    {
      id: 1,
      intentName: "getPhoneNo",
      Description: "getting users phone no",
      ques: [{ q1: "how can i get users phone no" }, { q2: "give me phone number" }]
    }
  ]
};
*/
this.setState(prevState => {
  const obj = {
    id: 2,
    intentName: "getWifi",
    Description: "getting users phone no",
    ques: [{ q1: "how can i get users wifi password" }, { q2: "give me wifi password" }]
  };

  return {
    data: [...prevState.data, obj]
  };
});