reactjs 在使用扩展运算符修改对象特性时,如何保留对象在数组中的索引?

dpiehjr4  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(124)

我有一个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]);
}
nlejzf6q

nlejzf6q1#

您应该在数组上使用map,并使用一个函数来检查id是否是您想要的,如果是,则使用新的text修改它,否则保持原样。
这样,您的整个函数变为:

function setQuestionTextById(id:number, text:string) {
    const updatedQuestions = questions.map(question => question.id === id ? { ...question, text } : question);
    setQuestions(updatedQuestions);
}

我觉得这比原文可读性强多了,也像你说的那样保持了秩序。
一个进一步的改进是使用setQuestions的函数更新形式,这样它就不依赖于questions的先前值,但我将把这留给您-这可能无关紧要,取决于在组件中如何使用它。

相关问题