React Router Dom中useActionData()无法解构对象的问题

组件首次渲染时，action函数还没被触发，useActionData()返回的是undefined。这时候你尝试解构{ name }，相当于从undefined里读取属性，自然会抛出错误。

而loader函数是路由匹配完成、组件渲染前就执行了，组件挂载时useLoaderData()已经拿到返回值，所以解构不会出问题。

给你几个实用的处理方案：

1. 解构时加默认空对象 #

给useActionData()的返回值兜底一个空对象，避免解构undefined：

export default function FormTest() {
  const { name } = useActionData() || {}; 
  // 其他代码
}

2. 用可选链安全访问 #

通过可选链操作符?.安全读取属性，还能配合默认值使用：

export default function FormTest() {
  // 注意：原action返回的是 { name: { name: 'xxx' } }，所以要两层name
  const name = useActionData()?.name?.name; 
  // 如果改成返回 { name: 'xxx' }，就用 useActionData()?.name
}

3. 先判断再解构 #

先检查返回值是否存在，再进行解构操作：

export default function FormTest() {
  const actionData = useActionData();
  let name;
  if (actionData) {
    ({ name } = actionData);
  }
  // 其他代码
}

你之前改代码后能正常运行，是因为直接把undefined赋值给name，JS允许这种操作；但解构要求操作对象必须是对象或数组，undefined不满足，所以才报错。

另外组件渲染4次是React StrictMode的正常行为（会触发两次挂载校验），和这个报错没有直接关系，核心问题还是首次渲染时useActionData()为undefined。

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