如何在传递空数组时将 useState 与 Typescript 结合使用

Question

我正在尝试将 JSX 代码转换为打字稿（TSX），并且在使用useState挂钩时难以传递接口。我想要的只是在我的状态下有一个空数组接口，并且在更新时我将对象一一推送到数组中。

我在更新计数时收到类型错误“‘any[]’类型的参数不可分配给‘SetStateAction’类型的参数。‘any[]’类型不可分配给‘(prevState: IData) => IData”类型.类型“any[]”与签名“(prevState: IData): IData”不匹配

这是我所做的代码：

样本.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>
)

}

PS 不要介意类型错误。

Answer 1

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

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

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