如何使用泛型正确设置 react useState答案

【问题标题】：How to correctly set react useState using generics如何使用泛型正确设置 react useState
【发布时间】：2021-11-11 18:05:00
【问题描述】：

核心问题 - 我在哪里搞砸了我的 useState

  const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>();

所以我作为道具发送的data对象是undefined？

我的（正常运行的）api 调用如下所示

export const getAllAssets = async (
 
): Promise<IAssetGetManyResponseDto<IAssetResponseDto>> => {
  console.log("get all assets ran in api.ts!")
  const response = await amsApiClient.get(ASSET_ENDPOINT(),
  {
    params: {
      limit: 1000
    }
  }
  );
  console.log("logging response data "+JSON.stringify(response.data))
  return response.data;
};

这里是使用的类型：

export interface IAssetGetManyResponseDto<T> {
  items: T[];
  totalCount: number;
}

export interface IAssetResponseDto {
  id: string | null;
  name: string | null;
  type: string | null;
  url: string | null;
  // metadata: IMetadataObj| null;
  tags: Array<string> | null;
  thumbnailImageURL: string | null;
  createdAt: number | null;
  updatedAt: number | null;
}

这是进行调用的组件，以显示上下文

export const AssetManagementTable = () => {

  const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>();

  const getAssets = async () => {

    console.log("getAssets ran!")

    const assets = await getAllAssets();
    console.log("logging data from asset managment table " + data)
    console.log("logging assets from asset managment table " + assets)
    setData(assets)
  }

  useEffect(() => {
    getAssets()
  }, []);

  return (

    <div>
      <NewAssetTable items={data} />
    </div>
  );
};

在我的应用程序的其他地方，当我向下传递道具并引用props.items.map((item: any). => {... 时，我得到了undefined。

更具体地说，TypeError: Cannot read properties of undefined (reading 'map')

我是否通过不正确地指定类型而弄乱了 useState 的参数？

谢谢！

【问题讨论】：

标签： reactjs typescript generics use-effect use-state

【解决方案1】：

看起来type definitions for React.useState 有点不安全。对于没有参数的变体，它们不会使用 undefined 增加返回类型。

所以，如果你告诉状态将始终包含IAssetGetManyResponseDto<IAssetResponseDto>，TS 编译器就会相信。

将鼠标悬停在 data 上，查看它有 IAssetGetManyResponseDto<IAssetResponseDto>，而它应该是 IAssetGetManyResponseDto<IAssetResponseDto> | undefined。

解决方法：

useState<IAssetGetManyResponseDto<IAssetResponseDto> | undefined>()
useState<IAssetGetManyResponseDto<IAssetResponseDto>>(someFunctionalMockOfYourData)

【讨论】：

谢谢@Zbigniew！我一直在尝试执行您提到的第二个选项 useState<IAssetGetManyResponseDto<IAssetResponseDto>>(someFunctionalMockOfYourData) 。我只是不知道如何模拟数据以传递 useState！如果这有助于弄清楚如何在功能上模拟数据，则将类型接口添加到问题中。
经典的“加载”问题。您基本上有 3 个选择 1) 不显示 NewAssetTable，并显示一些“正在加载...”占位符。 2) 确保 NewAssetTable 与 data=undefined 一起使用 3) 准备“空模拟” ...现在是你的电话，当你有正确的打字时:)
谢谢！但是空的模拟会是什么样子？我如何将它传递给 useState？
const [data, setData] = useState<IAssetGetManyResponseDto<IAssetResponseDto>>({ items: [], totalCount: number }); ?
是的，看起来{items: [], totalCount: 0} 适合您的情况。但是，我不了解您的应用。您必须决定在数据仍然不可用时显示什么。