我正在尝试初始化一个常量变量,它可以用作字符串或字符串数组,具体取决于我的组件正在接收的 Prop 。
我正在尝试将其初始化为
const [selectedOptions, setSelectedOptions] = useState<string[] | string>([]);
我意识到这是错误的方式,因为这将状态标识为 string[] | string
而不是 string[]
或 string
.我应该如何去初始化它呢?
最佳答案
我认为它完全符合您的要求。请参阅以下示例:
const [selectedOptions, setSelectedOptions] = useState<string[] | string>([]);
const arrayState: string[] = selectedOptions;
正如预期的那样,Typescript 抛出以下错误:Type 'string | string[]' is not assignable to type 'string[]'.
Type 'string' is not assignable to type 'string[]'.(2322)
字符串变量也会发生同样的情况(正好相反):const stringState: string = selectedOptions;
如果您有不同的子组件,以及期望不同类型的 Prop ,以下代码段应该会有所帮助。import React, {useState} from 'react';
const SelectionSet = () => {
const [selectedOptions, setSelectedOptions] = useState<string[] | string>([]);
if(Array.isArray(selectedOptions)) {
const arrayState: string[] = selectedOptions;
return <ComponentA arrayProp={arrayState} />
}
const stringState: string = selectedOptions;
return <ComponentB stringProp={stringState} />
}
这些变量只是出于解释原因。您还可以使用 selectedOptions
设置 Prop 直接状态。另一方面,如果你想使用
selectedOptions
-state 总是在同一个子组件上,类似于以下几行可能是一个解决方案:const SelectionSet = () => {
const [selectedOptions, setSelectedOptions] = useState<string[] | string>([]);
// note the negation
if(!Array.isArray(selectedOptions)) {
return <ComponentC stringProp={selectedOptions} />
}
return selectedOptions.map((option, key) => {
return <ComponentC stringProp={option} key={key} />
});
}
关于javascript - UseState 多个初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68180599/