如何将数组克隆后存入React useState钩子

问题排查 #

• 语法错误：JSON.parse调用行缺少右闭合括号，会直接导致代码运行失败，正确写法为setSorted(JSON.parse(JSON.stringify(sortedArr)))
• 重复调用状态更新方法：同一渲染周期内连续调用两次setSorted，后一次赋值会覆盖前一次的结果，属于无效操作
• 对React状态更新机制的误解：React状态更新为批量异步处理，若在setSorted调用后立刻打印Sorted变量，拿到的仍是当前渲染周期的旧值，无法验证更新结果。可在组件顶层打印状态，或通过useEffect监听Sorted的变化验证更新结果
• 展开运算符克隆纯值类型数组的逻辑本身是正确的，不需要额外使用JSON序列化方案，对于仅包含数字、字符串、布尔值的数组，浅克隆完全满足需求

正确实现示例 #

import { useState, useEffect } from 'react';

function ArrayStateDemo() {
  const [sorted, setSorted] = useState([]);
  const a = [1, 3, 5];
  const b = [2, 4, 6];

  function getMergedSortedArr() {
    const mergedArr = [...a, ...b];
    // 加入数字排序规则，避免大数字/特殊场景下sort默认排序不符合预期
    return mergedArr.sort((prev, next) => prev - next);
  }

  useEffect(() => {
    const sortedArr = getMergedSortedArr();
    // 直接传入浅克隆后的新数组即可完成状态更新
    setSorted([...sortedArr]);
  }, []);

  // 此处打印可拿到最新的状态值
  console.log('sorted状态值：', sorted);

  // 渲染到页面验证结果
  return (
    <div>
      排序结果：
      {sorted.map(num => <span key={num}>{num} </span>)}
    </div>
  );
}

补充说明 #

如果数组元素为引用类型（对象、子数组等），才需要考虑深克隆，纯值类型数组使用展开运算符做浅克隆即可，性能远高于JSON序列化方案。

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