如果问题ID相同，如何在setState中更新对象，否则添加到setState

Question

有一个反应调查表组件，它向this.state = { answer: []}添加选定的答案，效果很好。 用户更新答案的同时，它又添加为另一个对象。 当questionID相同时，是否有任何选项可以更新setState的对象？

 onChange(event) { const field = event.target.name; let question = event.target.dataset.questionId; let result = event.target.value; let answer = { 'questionID': question, 'answerValues': result }; this.setState({ answer: [ ...this.state.answer, answer, ] }); console.log(this.state.answer); } 

目前同样添加的问题是这样的

[ 
  {
    "questionID": 1,
    "answerValues": 2
  },
  {
    "questionID": 2,
    "answerValues": 5
  }
  {
    "questionID": 1,
    "answerValues": 1
  }
]

如果已经存在相同的questionID那么任何更新对象的解决方案都是this.state.answer吗？

Answer 1

您需要使用对象分配，在此代码中，如果ID已经存在该问题，您将能够更新该问题，否则它将添加一个新问题

  const field = event.target.name;
  let question = event.target.dataset.questionId;
  let result = event.target.value;
  let newAnswer = {
    'questionID': question,
    'answerValues': result
  };
   this.setState(prevState => {
            const user = prevState.answer.find(d => d.questionID === newAnswer.questionID);
            if (!!user) {
                Object.assign(user, newAnswer);
                const data = prevState.answer.map(d => d.questionID === user.questionID ? user : d);
                return { answer: data }
            } else {
                return { answer: prevState.answer.concat(newAnswer)};
            }
        })

Answer 2

就像马丁说的那样

let questionExistsInState = (this.state.answer.some((ans) => (ans.questionId === answer.questionId)));
let newState = []
if(questionExistsInState) {
  newState = this.state.answer.map((ans) => (ans.questionId === answer.questionId ? answer : ans))
} else {
  newState = [answer, ...this.state.answer]
}
this.setState({
    answer: newState ,
  });

我也看到您在onChange事件中使用setState。 请注意，setState不是同步操作，如果在setState（）调用后立即进行控制台日志记录，则无法保证将看到新状态。 您可以控制台登录setState函数的回调（第二个参数）。

Answer 3

我建议将答案存储为对象，其中键是问题ID，值是答案。 在您的构造函数中：

this.state = { answer: {}}

然后在onChange() ：

this.setState({
    answer: Object.assign({}, this.state.answer, {
        [question]: result,
    });
});

Answer 4

您可以这样减少：

this.setState({
  answer: this.state.answer.reduce((acc,ans)=>{
    return ans.questionID === answer.questionID
      ? [...acc,answer]
      : [...acc,ans]
  },[])
})

Answer 5

您可以像使用数组映射一样

this.setState({
    answer: this.state.answer.map(
     (existingAnswer) => (existingAnswer.questionID === answer.questionID 
        ? answer : existingAnswer)),
  });