在使用打字稿响应中启动空状态的正确方法是什么

Question

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

Answer 1

useState可以接受一个类型。当Typescript不能从初始值的类型推断出类型时，这很有用。这是任何null默认值的常见情况。当它不是null时，你需要告诉typescript该值是什么。

例如:

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