React useState状态更新函数使用前态时如何正确定义TypeScript类型

问题根因 #

你一共遇到两个核心错误：

1. 类型冗余：你初始化hierarchy时已经给了空数组作为默认值，永远不会出现undefined的情况，类型定义里的| undefined属于多余约束，反而会增加非空判断成本。
2. 数组元素类型不匹配：hierarchy的类型是Event[]，要求每一个元素都是单个Event对象，但你直接把selectedSubEvent（本身就是Event[]类型）作为单个元素推入数组，导致最终数组的类型变成了(Event | Event[])[]，和预设的Event[]不匹配，所以触发类型报错。

修复步骤 #

场景1：需要把selectedSubEvent里的所有事件都追加到层级列表中

这是最符合你现有代码逻辑的场景，修复方式如下：

1. 修正Context类型定义，去掉不必要的undefined约束：

interface SubEventContextObject {
  hierarchy: Event[]
  setHierarchy: Dispatch<SetStateAction<Event[]>>
  selectedSubEvent: Event[];
  setSelectedSubEvent: Dispatch<SetStateAction<Event[]>>;
}

2. 修正useState的泛型声明：

const [hierarchy, setHierarchy] = useState<Event[]>([]);
const [selectedSubEvent, setSelectedSubEvent] = useState<Event[]>([]);

3. 修正状态更新逻辑，展开selectedSubEvent再追加：

useEffect(() => { 
  setHierarchy((prevState) => [...prevState, ...selectedSubEvent])
}, [selectedSubEvent]);

场景2：需要把当前选中的单个任务作为层级节点追加

如果你的业务需求是hierarchy里每一项都是用户点击的单个任务，那说明你selectedSubEvent的类型定义错误，应该是单个Event对象而不是数组，修正方式如下：

1. 修正Context类型定义：

interface SubEventContextObject {
  hierarchy: Event[]
  setHierarchy: Dispatch<SetStateAction<Event[]>>
  selectedSubEvent: Event | undefined;
  setSelectedSubEvent: Dispatch<SetStateAction<Event | undefined>>;
}

2. 修正useState的泛型声明：

const [hierarchy, setHierarchy] = useState<Event[]>([]);
const [selectedSubEvent, setSelectedSubEvent] = useState<Event | undefined>();

3. 修正状态更新逻辑，判断selectedSubEvent存在再追加：

useEffect(() => { 
  if (selectedSubEvent) {
    setHierarchy((prevState) => [...prevState, selectedSubEvent])
  }
}, [selectedSubEvent]);

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