React中如何更新对象数组类型state不覆盖旧值，解决topic is not iterable报错

错误原因 #

你当前的状态结构存在冗余嵌套，且更新逻辑没有命中正确的修改层级，是触发topic is not iterable错误的核心原因：
你定义的topic状态为「外层数组包裹单个对象，对象内部嵌套topics数组存储实际主题数据」的结构，但你编写的更新逻辑直接遍历外层数组，返回的新对象覆盖了原有的topics字段，导致状态结构被破坏，后续尝试对非数组类型的topic执行展开操作时就会抛出不可迭代错误。

多topic存储方案选型 #

根据你的业务场景，三种方案的优先级如下：

• 首选对象数组：每个数组元素对应单个topic对象，包含id、topicName、subject等全量属性。结构扁平化无嵌套，遍历渲染、新增删除的逻辑编写成本最低，适配绝大多数业务场景。
• 次选纯对象：仅当你需要高频根据topic id查询单条数据时使用，以topic id为对象key、topic完整属性为value，查询时间复杂度为O(1)。
• 不推荐纯数组：仅适合存储单一基础类型的数据集，你当前每个topic包含多个属性，纯数组无法满足存储需求。

修复代码 #

推荐方案（扁平化状态结构） #

直接去掉冗余嵌套，将状态定义为纯topic对象数组，更新逻辑最简单，不易出错：

const AddTopic = (props) => {  
  const { subjectName } = props;
  // 直接用对象数组存储所有topic
  const [topics, setTopics] = useState([
    {
      id: Math.random().toString(36).substr(2, 7),
      topicName: "topic name",
      subject: subjectName,
    }
  ]);

  const addTopicHandler = () => {
    // 函数式更新取最新前序状态，展开原有数组后追加新对象，不会覆盖旧数据
    setTopics(prevState => [
      ...prevState,
      {
        id: Math.random().toString(36).substr(2, 7),
        topicName: "another topic name",
        subject: subjectName,
      }
    ]);
  };

  console.log(topics);
}

兼容原有嵌套结构的方案（不推荐） #

如果你必须保留现有的嵌套状态结构，可按如下逻辑修改更新方法：

const addTopicHandler = () => {
  setTopic(prevState => {
    return prevState.map(item => {
      return {
        ...item,
        // 命中内层topics数组，追加新数据而非覆盖外层结构
        topics: [
          ...item.topics,
          {
            id: Math.random().toString(36).substr(2, 7),
            topicName: "another topic name",
            subject: subjectName,
          }
        ]
      }
    })
  })
}

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