javascript - UseState 多个初始状态

Question

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

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;

如果您有不同的子组件，以及期望不同类型的 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} />        
    });    
}