Question

我正在尝试初始化一个常量变量，该变量可以用作字符串或字符串数组，具体取决于我的组件正在接收的道具。

我正在尝试将其初始化为

const [selectedOptions, setSelectedOptions] = useState<string[] | string>([]);

我意识到这是不正确的方式，因为它将状态标识为 string[] | string 而不是 string[] 或 string。我应该如何初始化它？

Answer 1

我认为它完全符合您的要求。请参见以下示例：

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;

如果您有不同的子组件，以及期望不同类型的道具，以下代码段应该会有所帮助。

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 状态设置 props direclty。

另一方面，如果您想始终在同一个子组件上使用 selectedOptions 状态，类似以下几行的内容可能是一个解决方案：

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} />        
    });    
}

UseState 多个初始状态

1 个答案: