我有一个React useState-Variable,它存储了一个对象数组,这些对象属于以下Question类型:
type Question = {
id: number,
text: string,
otherProps: string,
...... (and so on)
}
我的useState示例
const [questions, setQuestions] = React.useState<Question[]>([{id: 1, text: "hello?", otherProps: "Lorem Ipsum"}])
这些Question对象在useState-Variable Array中的顺序很重要,所以**我的问题是:下面的函数应该如何修改,以使Question的文本被更改,但被修改对象的数组索引被维护/保留?**我知道目前我是先删除对象,然后在最后放置一个新创建的,但我现在找不到其他方法。
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]);
}
1条答案
按热度按时间nlejzf6q1#
您应该在数组上使用
map
,并使用一个函数来检查id
是否是您想要的,如果是,则使用新的text
修改它,否则保持原样。这样,您的整个函数变为:
我觉得这比原文可读性强多了,也像你说的那样保持了秩序。
一个进一步的改进是使用
setQuestions
的函数更新形式,这样它就不依赖于questions
的先前值,但我将把这留给您-这可能无关紧要,取决于在组件中如何使用它。