[英]How to update the object in setState if the questionID same otherwise add to setState
There is a react questionnaire component which add selected answers to this.state = { answer: []}
which works fine. 有一个反应调查表组件,它向
this.state = { answer: []}
添加选定的答案,效果很好。 At the same time when the user update answer it add as another object. 用户更新答案的同时,它又添加为另一个对象。 Is there any option to update the object in
setState
when the questionID is the same ? 当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); }
Currently same question adding like this 目前同样添加的问题是这样的
[
{
"questionID": 1,
"answerValues": 2
},
{
"questionID": 2,
"answerValues": 5
}
{
"questionID": 1,
"answerValues": 1
}
]
any solution to update the object if already exist same questionID
is this.state.answer
? 如果已经存在相同的
questionID
那么任何更新对象的解决方案都是this.state.answer
吗?
You need to use object assign, in this code, you will be able to update the question if it already exists by ID else it will be adding a new question 您需要使用对象分配,在此代码中,如果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)};
}
})
like Martin said use 就像马丁说的那样
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 ,
});
Also I see that you are using setState in an onChange event. 我也看到您在onChange事件中使用setState。 Please note that setState is not a synchronous operation, it is not guarenteed that you will see the new state if you are console logging immediately after setState() call.
请注意,setState不是同步操作,如果在setState()调用后立即进行控制台日志记录,则无法保证将看到新状态。 You can console log in the callback(second argument) of setState function.
您可以控制台登录setState函数的回调(第二个参数)。
I suggest storing answers as an object where the key is the question id and the value is the answer. 我建议将答案存储为对象,其中键是问题ID,值是答案。 In your constructor:
在您的构造函数中:
this.state = { answer: {}}
Then in onChange()
: 然后在
onChange()
:
this.setState({
answer: Object.assign({}, this.state.answer, {
[question]: result,
});
});
You can reduce like that : 您可以这样减少:
this.setState({
answer: this.state.answer.reduce((acc,ans)=>{
return ans.questionID === answer.questionID
? [...acc,answer]
: [...acc,ans]
},[])
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.