React数组状态更新后映射元素未重新排序，求原因解析

问题场景 #

在使用React状态更新数组时，数值已发生变化，但从该数组映射生成的React元素并未重新排序。初始状态为[1, 3, 2]，映射为平方数组后排序显示为[1, 4, 9]；当给数组最后一个元素加2后，状态变为[1, 3, 4]，映射后平方数组排序本应是[1, 9, 16]，但页面显示的却是[1, 16, 9]，排序未按预期更新。

复现代码 #

const TestObject = () => {
  const [state, setState] = React.useState([1, 3, 2]);
  const handleAdd = () => {
    setState([state[0], state[1], state[2] + 2]);
  };
  const mappedArray = state.map((x) => x * x);
  mappedArray.sort();
  return (
    <div>
      <p>State: {JSON.stringify(state)}</p>
      <button onClick={handleAdd}>Add</button>
      <h4>Sorted:</h4>
      <ul>
        {mappedArray.map((x, idx) => (
          <li key={idx}>{x}</li>
        ))}
      </ul>
    </div>
  );
};

原因解析 #

核心问题：索引作为key导致React Diff算法误判 #

这里的根本问题是使用数组索引作为列表元素的key，结合React的列表Diff机制，导致React没有正确识别元素的位置变化：

• 初始排序后，mappedArray为[1,4,9]，对应key=0、1、2的元素分别是1、4、9。
• 更新后mappedArray排序后是[1,9,16]，但React看到的是：key=0的元素还是1，key=1的元素变成了16，key=2的元素变成了9。
• React的Diff算法会优先复用已有key的元素，它会认为只是key=1和key=2的元素内容发生了变化，而非整个列表的顺序改变，因此不会重新排列元素位置。

次要细节：sort()的默认排序逻辑 #

另外需要注意，Array.sort()默认是字符串字典序排序，本次场景中数值刚好未出现排序错误，但如果涉及多位数（比如10和2）就会出错，建议显式传入数值比较函数：mappedArray.sort((a, b) => a - b)，不过这不是本次排序未更新的核心原因。

解决方案 #

将key从数组索引改为元素的唯一值（本次场景中每个平方值都是唯一的）：

{mappedArray.map((x) => (
  <li key={x}>{x}</li>
))}

这样当列表排序变化时，React会根据key的对应关系重新排列元素，而非复用旧位置的元素。

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