传递空数组时如何将useState与Typescript一起使用答案

【问题标题】：How to use useState with Typescript while passing empty array传递空数组时如何将useState与Typescript一起使用
【发布时间】：2021-01-22 10:54:17
【问题描述】：

我正在尝试将我的 JSX 代码转换为 typescript (TSX)，并且在使用 useState 挂钩时难以通过接口。我想要的只是在我的状态下的空数组接口，并且在更新时我将对象一一推送到数组。

更新计数时出现键入错误“'any[]' 类型的参数不可分配给'SetStateAction' 类型的参数。类型 'any[]' 不可分配给类型 '(prevState: IData) => IData'。类型 'any[]' 不匹配签名 '(prevState: IData): IData'"

这是我做的代码：

sample.tsx

const interface IData {
id: number
value: string
}
const Sample = () => {

let [count, setCount] = useState<IData>([]);       <------------ Want to know how to pass the blank interface or Array and also how to update interface once values are pushed to the Array

const addCount = () => {
    setCount([...count, {
        id: count.length,
        value: 'Condition ' + count.length      
    }])
}

const handleRemove = (id:number) => {
    console.log(id);
    const count_upd = count.filter((item:any) =>  item.id != id);
    setCount(count_upd);
}


return(
    <React.Fragment>
        <Container>
        { Array(count).fill(<ConditionSeg Data={count.map((item:IData) =>  (
                    item.id,item.value
                ))}
                HandleRemove ={handleRemove}
                />)}
        </Container>
        <Container>
            <Button 
                onClick={addCount}>
                Click me</Button>
        </Container>
    </React.Fragment>
)

}

附：不要介意类型错误。

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案1】：

据我所知，您想要存储IData 类型的值数组。在这种情况下，您应该使用

let [count, setCount] = useState<IData[]>([]);

这意味着，您正在存储一个类型为IData 的值数组。在您上面的例子中，您忘记了数组括号，因此 setCount 实际上需要一个 IData 类型的对象而不是数组。

【讨论】：

好的，所以接口将是数组类型。谢谢
您能否也给我一些想法？“元素”类型的参数不能分配给“IData []”类型的参数。 “Element”类型缺少“IData[]”类型的以下属性：length、pop、push、concat 和 28 个以上。ts(2345)“ConditionSeg”不能用作 JSX 组件。它的返回类型 'Element[]' 不是有效的 JSX 元素。类型“元素 []”缺少类型“元素”的以下属性：类型、道具、键
因此，当我将此状态作为道具传递给孩子时，我收到此错误消息，指出元素不可分配给 IData[] 类型的参数
'Element' 类型的参数不可分配给'IData[]' 类型的参数...：这意味着你在某处使用了'Element' 类型的值您的代码需要“IData []”类型的值。 “元素”类型是由反应组件产生的。
'ConditionSeg' 不能用作 JSX 组件。它的返回类型 'Element[]' 不是有效的 JSX 元素。：这意味着您在 'ConditionSeg' 中返回了一个数组，但这是无效的。您应该始终返回“元素”类型的单个元素。