useState更新分类消息数组时推入首个元素崩溃问题求解

• 状态更新时的嵌套结构写法错误：你的error/warning/info数组是挂载在状态根对象的sortedMessages属性下的，你当前的写法直接将error放到了状态根层级，破坏了原有结构，同时第一次更新时如果你没有正确初始化状态的嵌套结构，解构previousMessages.sortedMessages.error时会读取到undefined，触发解构错误直接崩溃。
• useState没有正确设置初始值：如果初始状态没有给sortedMessages下的三个数组显式赋值为空数组，第一次读取数组时也会抛出类型错误。

1. 修正状态初始化写法 #

确保useState的初始值完全匹配你定义的ISortedMessages类型：

import { useState } from 'react';

const [stateMessages, setStateMessages] = useState<ISortedMessages>({
  sortedMessages: {
    error: [],
    warning: [],
    info: []
  }
});

2. 修正状态更新逻辑 #

更新嵌套对象时要逐层展开，不能直接修改根层级属性：

switch (message.priority) {
  case 0:
    setStateMessages(previousMessages => ({
      ...previousMessages,
      sortedMessages: {
        ...previousMessages.sortedMessages,
        error: [...previousMessages.sortedMessages.error, message.message]
      }
    }));
    break;
  case 1:
    setStateMessages(previousMessages => ({
      ...previousMessages,
      sortedMessages: {
        ...previousMessages.sortedMessages,
        warning: [...previousMessages.sortedMessages.warning, message.message]
      }
    }));
    break;
  case 2:
    setStateMessages(previousMessages => ({
      ...previousMessages,
      sortedMessages: {
        ...previousMessages.sortedMessages,
        info: [...previousMessages.sortedMessages.info, message.message]
      }
    }));
    break;
}

可以用优先级映射表简化重复的switch代码，后续新增优先级也只需修改映射表即可：

// 优先级和分类的映射关系，顺序对应priority的值
const priorityMap = ['error', 'warning', 'info'] as const;

// 更新逻辑直接简化为一段代码，无需分支判断
setStateMessages(previousMessages => {
  const category = priorityMap[message.priority];
  return {
    ...previousMessages,
    sortedMessages: {
      ...previousMessages.sortedMessages,
      [category]: [...previousMessages.sortedMessages[category], message.message]
    }
  };
});

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