初始化空状态以与打字稿反应的正确方法是什么答案

【问题标题】：What's the correct way to initailise empty states in react with typescript初始化空状态以与打字稿反应的正确方法是什么
【发布时间】：2021-10-17 08:55:16
【问题描述】：

我对 react 很陌生，想知道在 react 中初始化空状态变量的正确方法是什么。目前我在打字稿中有一个表格，其中有几个字段要填写。大多数这些字段都是下拉列表，我已经将一些静态数据初始化为对象数组，类似于这样。

export const options = [
    {
        id : 0,
        name : "Setting 1"
    },
    {
        id : 1,
        name : "Setting 2"
    },
    {
        id : 2,
        name : "Setting 3"
    }

];

所以我可以在表单的下拉列表中显示这些选项，并且一切都按预期工作。当我尝试初始化用于检查该字段更新的状态时，问题就来了。

const [myForm, setMyForm] = React.useState({
        dropdown : options[0],
        dropdown1 : options1[0]
    });

因此，对于我来说，在我为跟踪状态而创建的 myForm 对象中，默认情况下，我会按照我指定的方式选择第一个选项。我无法将其初始化为null，因为打字稿需要任何声明的类型。最初将值作为空对象的最佳实践是什么，然后在用户从下拉列表中检查选项时设置它。因为如果我将它设置为options 中的{} 之类的空对象，我将无法访问代码中的id 和name 字段。谁能告诉我正确的做法是什么

【问题讨论】：

鉴于那里有一个初始渲染步骤，它期望id 和name 的默认值是多少？
@zerkms 我只是希望它为空，我是否应该在 options 数组中添加一个额外的对象，其中 id 为 -1，名称为“-1”，或者有没有办法将状态设置为 null 并使用对象字段（id 和 name）还是我需要添加一个额外的对象？
“空”到底是什么意思？如果您阅读 id 属性 - 默认情况下，您期望那里有什么价值？
为空，未选择任何内容，为了解释，我们在下拉列表中说id = -1 和name = "-1"
任何反应钩子都是通用的。所以你可以使用泛型来描述状态类型。喜欢useState<{} | null>(null);

标签： javascript reactjs typescript react-hooks

【解决方案1】：

useState 可以采用类型。这适用于 Typescript 无法从初始值的类型推断类型的情况。这通常是任何null 默认值的情况。您需要告诉 typescript 当它不是 null 时该值可能是什么。

例如：

const [name, setName] = useState<string | null>(null)

// name is of type: string | null
if (name != null) console.log(name.toUpperCase())

我不完全遵循您的代码，但我认为您可能希望像这样设置您的状态类型，并将值作为可选值。这意味着它允许丢失或未定义。

interface State {
  dropdown: FormField
  dropdown1: FormField
}

interface FormField {
  id: number
  name: string
  value?: string
}

然后使用那个类型：

const [myForm, setMyForm] = React.useState<State>({
  dropdown : options[0],
  dropdown1 : options1[0]
});

myForm.dropdown.name // allowed, and type is: string | undefined

【讨论】：

谢谢，这正是我想要的，正确的方法。