React JS中重置对象数组类型state的最佳方法是什么

你不需要重复硬编码初始值，以下两种是生产环境通用的可靠方案：

方案1：静态初始值抽离为常量（优先推荐） #

如果初始值是固定的、不依赖组件props/上下文动态计算，直接把初始值抽成独立常量即可，这是代码最简洁、无额外开销的实现：

// 定义在组件外层，组件每次重渲染不会重复创建该常量
const INITIAL_USER_LIST = [
  {name:'abc',age:24},
  {name:'xyz',age:20}
]

function UserComponent() {
  const [userList, setUserList] = useState(INITIAL_USER_LIST)

  const reset = () => {
    // 传入初始值的深拷贝，避免后续修改state时污染原常量
    // 现代浏览器环境直接用原生structuredClone做深拷贝即可，无需引入第三方工具
    setUserList(structuredClone(INITIAL_USER_LIST))
    // 如需兼容极旧浏览器，可替换为浅拷贝数组+浅拷贝每项的写法：
    // setUserList(INITIAL_USER_LIST.map(item => ({...item})))
  }

  // 其余业务逻辑
}

方案2：动态初始值用ref持久化存储 #

如果初始值是组件挂载时根据props、接口返回等动态计算得到的，没法提前抽成组件外常量，可以用useRef存储首次生成的初始值，配合useState的惰性初始化特性实现：

function UserComponent({ defaultUsers }) {
  const initialUserListRef = useRef(null)
  const [userList, setUserList] = useState(() => {
    // 惰性初始化函数仅在组件首次挂载时执行1次，不会随重渲染重复执行
    const initialValue = defaultUsers ?? [
      {name:'abc',age:24},
      {name:'xyz',age:20}
    ]
    initialUserListRef.current = initialValue
    return initialValue
  })

  const reset = () => {
    setUserList(structuredClone(initialUserListRef.current))
  }

  // 其余业务逻辑
}

避坑说明 #

• 不要用useMemo存储初始值，React官方不保证useMemo的缓存值不会被回收重算，作为初始值存储存在失效风险
• 重置时不要直接传入初始值的原引用（比如直接写setState(INITIAL_USER_LIST)），由于数组和对象是引用类型，后续直接修改state内对象的属性时会污染原初始值，导致后续重置逻辑失效
• 初始值完全静态的场景优先选第一种方案，代码可读性更高，维护成本更低，不需要额外引入ref相关逻辑。

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