在使用擴展運算符修改 object 屬性時，如何保留數組中 object 的索引？

Question

我有一個 React useState-Variable，它存儲一個屬於這種問題類型的對象數組：

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 中的順序很重要，所以我的問題是：如何更改以下 function 以便更改 Question 的文本，但維護/保留修改后的 object 的數組索引？ 我知道目前我首先刪除 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]);
}

Answer 1

你應該在數組上使用map和 function 檢查id是否是你想要的 - 如果是它用新text修改它，否則保持原樣。

這樣，你的整個 function 就變成了：

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

我發現它比原來的更具可讀性，並且可以根據您的需要保留順序。

進一步的改進是使用setQuestions的功能更新形式，因此它不依賴於questions的先前值，但我會把它留給你 - 這可能無關緊要，具體取決於它在你的成分。