如何正确在React useState中使用泛型 解决传递props为undefined报错问题

你遇到的报错和useState的类型指定方式无关，核心原因如下：

• 你声明useState时没有传入初始值，const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>();这行代码的初始值为undefined，而接口请求是异步执行的，组件首次渲染时请求还未返回，此时你直接将undefined作为props传递给子组件，子组件调用map方法时自然会报错。
• 你没有对传递的props做空值兜底处理，即使接口请求成功后data有值，也可能存在接口异常返回空的情况，缺少空值处理会直接触发运行时报错。

解决方案 #

可根据你的开发场景任选以下任意一种方案修复：

1. 给useState设置符合类型的初始值
   直接在useState中传入符合IAssetGetManyResponseDto结构的初始值，首次渲染就不会出现undefined：

const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>({
  items: [],
  totalCount: 0
});

2. 父组件侧增加条件渲染
   在父组件判断data有值后再渲染子组件，避免传递undefined，还可以同步加加载状态提升用户体验：

return (
  <div>
    {!data && <div>资源加载中...</div>}
    {data && <NewAssetTable items={data} />}
  </div>
);

3. 子组件侧做参数兜底
   子组件接收props后先做非空处理再调用map：

// 子组件内先做兜底处理
const assetItems = props.items?.items ?? [];
// 再执行遍历操作
assetItems.map((item) => {...})

补充说明：你在getAssets方法中打印的data是旧值，这是React state更新的批量处理机制导致的，属于正常现象，不是问题。

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