javascript - 与 typescript react 来初始化空状态的正确方法是什么

Question

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

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 因为 typescript 需要任何声明的类型。最初将值设置为空对象，然后在用户从下拉列表中检查选项时设置它的最佳实践是什么。因为如果我将其设置为 options 中的 {} 之类的空对象，我将无法访问 id 和 name > 代码中的字段。谁能告诉我正确的做法是什么

Answer 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