如果問題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)),
  });