React中修改useState数组对象属性时如何保留其索引位置？

你现在的实现之所以会打乱顺序，是因为先通过filter移除了目标元素，再把新对象追加到数组末尾——这自然会改变它的位置。想要保持索引不变，我们可以直接遍历原数组，只修改匹配到id的元素，其他元素原样保留就行。

修改后的函数实现 #

function setQuestionTextById(id: number, text: string) {
  setQuestions(prevQuestions => {
    // 遍历原数组，严格保持原有顺序，只更新目标元素的text属性
    return prevQuestions.map(question => {
      if (question.id === id) {
        // 返回新对象，不修改原状态引用
        return { ...question, text };
      }
      // 其他元素直接返回原对象，避免不必要的复制
      return question;
    });
  });
}

为什么这个方法可行？ #

• map方法会严格按照原数组的顺序遍历每一个元素，修改后的数组结构和原数组索引完全对应
• 只有匹配到目标id的元素才会被创建为新对象（复制原属性+替换text），其余元素直接复用原对象，性能更优
• 使用函数式更新（prevQuestions => ...）是React状态更新的最佳实践：当你的更新依赖于之前的状态时，这种方式能确保拿到的是最新的state值，避免异步场景下的状态不一致问题

原来实现的问题所在 #

你之前的代码通过filter移除目标元素，再把新对象追加到末尾，直接改变了元素的索引位置：

const filteredQuestions = questions.filter(item => item.id !== id);
setQuestions([...filteredQuestions, newQuestion]);

这种方式适合需要调整元素位置的场景，但显然不符合你要保持索引不变的需求。

额外提示 #

不需要额外判断questions是否为空，因为map在空数组上执行只会返回空数组，不会引发错误，代码可以更简洁。

内容的提问来源于stack exchange，提问作者David