ReactJS如何更新嵌套对象数组？useState操作返回undefined怎么办

useState更新嵌套状态时返回undefined，本质是违反了React的不可变更新规则：要么是直接修改原状态没有生成新引用，要么是更新逻辑里遗漏了return，要么是嵌套层级没有做完整的浅拷贝，导致状态结构被破坏。

首先你的状态初始化代码应该类似如下结构：

import { useState } from 'react';

// 组件内状态定义
const [tempobj, setTempobj] = useState([
  {
    id: "1",
    fanimate: [
      {
        id: "111",
        animate: "xyz",
      },
    ],
  },
]);

通用写法（支持多元素匹配更新） #

如果你的外层数组可能有多个对象，需要根据id匹配要追加动画的目标项，用如下写法：

// 准备要追加的新动画对象
const newAnimate = {
  id: "222",
  animate: "def"
};

setTempobj(prevList => prevList.map(item => {
  // 匹配id为"1"的目标项
  if (item.id === "1") {
    return {
      ...item, // 拷贝原对象的所有顶层属性
      fanimate: [...item.fanimate, newAnimate] // 拷贝原fanimate数组，末尾追加新元素
    }
  }
  // 非目标项直接返回，不做修改
  return item;
}));

简化写法（外层数组只有固定1项） #

如果你的外层数组永远只有id为"1"的这一个对象，可以直接按索引更新，写法更简洁：

setTempobj(prev => [
  {
    ...prev[0],
    fanimate: [...prev[0].fanimate, {id: "222", animate: "def"}]
  }
]);

• 不要直接用push修改原状态的数组：比如直接写tempobj[0].fanimate.push(newAnimate)再调用setState，React检测不到引用变化，会导致更新不生效
• 不要遗漏return：如果更新回调里的箭头函数没写返回值，默认返回undefined，就会出现你遇到的状态变成undefined的问题
• 不要漏做嵌套拷贝：如果只拷贝最外层数组，直接修改内部对象的fanimate属性，会污染原状态，引发不可预期的渲染问题

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