我对 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
> 代码中的字段。谁能告诉我正确的做法是什么
最佳答案
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
关于javascript - 与 typescript react 来初始化空状态的正确方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69602729/