TypeScript中React useState更新回调的prev参数类型如何指定？

你此处prev的类型直接填写IhowitterMessage[]即可。

原因说明 #

你在调用useState初始化howitters状态时，已经通过泛型参数IhowitterMessage[]明确了该状态是由IhowitterMessage类型元素组成的数组。setter函数setHowitters接收的更新回调的入参prev代表当前的状态值，和状态本身的类型完全一致。

修改后代码 #

你只需要将问题行修改为如下内容即可：

setHowitters((prev: IhowitterMessage[]) => [howitterObject, ...prev]);

可选性能优化 #

你当前的写法是每遍历一条查询结果就更新一次状态，会触发多次组件重渲染，建议先收集所有查询结果再一次性更新：

const getHowitters = async () => {
  const dbHowitter = await dbService.collection("howitter").get();
  // 先收集所有查询到的消息对象
  const newHowitters: IhowitterMessage[] = [];
  dbHowitter.forEach((document) => {
    const howitterObject = {
      ...document.data(),
      id: document.id,
    } as IhowitterMessage;
    // 保持新数据在前的顺序
    newHowitters.unshift(howitterObject);
  });
  // 一次性更新状态
  setHowitters((prev) => [...newHowitters, ...prev]);
};

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