将对象字典设置为 TS/React 函数组件中的 useState() 类型答案

【问题标题】：Setting dictionary of objects as type for useState() in TS/React function components将对象字典设置为 TS/React 函数组件中的 useState() 类型
【发布时间】：2022-01-12 17:15:25
【问题描述】：

我正在尝试从类切换到函数组件。

如果我已经定义了datasets 接口并且想要一个状态变量

 datasets: {[fieldName: string]: Dataset};

 Example: {"a": datasetA, "b": datasetB}

这是一种有效的编写方式吗？

const [datasets, setDatasets] = useState <{[fieldName: string]: Dataset}> ({});

【问题讨论】：

当然可以
你没试过？什么有效，不使用这种语法？
我还没有尝试过，因为我正在一起转换一些东西。 vscode 中没有红色下划线真的让我失望

标签： reactjs typescript react-hooks use-state

【解决方案1】：

这是useState 的有效类型

const [datasets, setDatasets] = useState<{[fieldName: string]: Dataset}> ({});

但是，您可以使用 Record 将其缩短一点：

const [datasets, setDatasets] = useState<Record<string, Dataset>> ({});

【讨论】：

谢谢您，现在正在查看React 中的Records 和Tuples。

【解决方案2】：

是的，这应该按原样进行类型检查！

您还可以定义一个类型来保存Dataset 记录，并将其传递给useState：

import "./styles.css";
import {useState} from 'react';

type Dataset = {};
type DatasetRecord = {
  [fieldName: string]: Dataset;
}

export default function App() {
const [datasets, setDatasets] = useState<DatasetRecord>({});
  return (...);
}

See demo here.

【讨论】：