React Hooks使用setState给对象属性赋值空数组时出现报错问题

• 空数组触发更新后Detail变为undefined，核心是两个触发条件：
  1. Detail状态未设置合法初始值：如果声明状态时写的是const [Detail, setDetail] = useState()，没有传入初始空对象，首次执行对象展开...Detail时会因为展开undefined抛出语法错误，状态更新失败，Detail就会保持初始的undefined值。
  2. 原始非函数式更新的依赖数组不完整：第一种写法的useEffect依赖数组仅包含AplicationsList，未加入Detail，导致useEffect捕获的Detail永远是首次渲染的闭包值，后续Detail被其他逻辑修改后，用旧值展开覆盖就会出现异常。
• 子组件报cannot read property map of undefined，是因为Detail本身或其components属性在某一时刻为undefined，子组件未做兼容判断就直接调用map方法。
• React卸载更新警告，是因为触发useEffect执行时，持有Detail状态的组件已经被卸载，此时调用setDetail不会生效，属于副作用未正确清理导致的问题。

1. 修正Detail状态的初始值，保证初始为合法可展开的对象，也可以直接给components设置默认空数组，避免后续兼容问题：

// 错误写法 初始值为undefined
const [Detail, setDetail] = useState()
// 正确写法
const [Detail, setDetail] = useState({ components: [] })

2. 给useEffect添加挂载状态标记，避免组件卸载后更新状态，保留函数式更新写法不需要额外添加Detail依赖：

useEffect(() => {
  let isMounted = true
  if (AplicationsList && isMounted) {
    setDetail(prevDetail => ({
      ...prevDetail,
      components: AplicationsList
    }))
  }
  return () => {
    isMounted = false
  }
}, [AplicationsList])

3. 子组件使用components属性前添加非空兼容判断，避免调用map时报错：

// 错误写法
Detail.components.map(item => /* 渲染逻辑 */)
// 正确写法，可选链加空值合并默认空数组
(Detail?.components ?? []).map(item => /* 渲染逻辑 */)

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