[英]How can the index of an object within an array be preserved when modifying an object property while using the spread operator?
I am having a React useState-Variable that stores an Array of Objects which are of this Question type:我有一个 React useState-Variable,它存储一个属于这种问题类型的对象数组:
type Question = {
id: number,
text: string,
otherProps: string,
...... (and so on)
}
Example of my useState我的 useState 示例
const [questions, setQuestions] = React.useState<Question[]>([{id: 1, text: "hello?", otherProps: "Lorem Ipsum"}])
The order of these Question objects in the useState-Variable Array matters, so my question is: How should the following function be changed so that the text of the Question is changed but the array index of the modified object is maintained/kept?这些 Question 对象在 useState-Variable Array 中的顺序很重要,所以我的问题是:如何更改以下 function 以便更改 Question 的文本,但维护/保留修改后的 object 的数组索引? I am aware that currently I am first deleting the object and then placing a newly created on at the end, but I can't figure out another way right now.
我知道目前我首先删除 object 然后在最后放置一个新创建的,但我现在想不出另一种方法。
function setQuestionTextById(id:number, text:string) {
if (!questions) return;
const question:Question|undefined = questions.find(x => x.id === id);
if (!question) return;
const newQuestion: Question = {
...question,
text,
};
const filteredQuestions = questions.filter(item => item.id !== id);
setQuestions([...filteredQuestions, newQuestion]);
}
You should use map
on the array with a function that checks if the id
is the one you want - if so it modifies it with the new text
, otherwise leaves it as is.你应该在数组上使用
map
和 function 检查id
是否是你想要的 - 如果是它用新text
修改它,否则保持原样。
This way, your whole function becomes:这样,你的整个 function 就变成了:
function setQuestionTextById(id:number, text:string) {
const updatedQuestions = questions.map(question => question.id === id ? { ...question, text } : question);
setQuestions(updatedQuestions);
}
Which I find much more readable than the original, as well as preserving order as you say you need.我发现它比原来的更具可读性,并且可以根据您的需要保留顺序。
One further refinement would be to use the functional update form of setQuestions
so it doesn't depend on the previous value of questions
, but I'll leave that up to you - it may not matter, depending on how this is being used in your component.进一步的改进是使用
setQuestions
的功能更新形式,因此它不依赖于questions
的先前值,但我会把它留给你 - 这可能无关紧要,具体取决于它在你的成分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.