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

Question

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

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谁能告诉我正确的方法是什么

Answer 1

useState可以采取一个类型。当 Typescript 无法从初始值的类型推断类型时，这很有用。任何默认值都经常出现这种情况null。当它不是 时，您需要告诉打字稿该值可能是什么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