如何在 Typescript 中使用数组和对象设置状态？

Question

这就是我声明状态的方式

const [input, setInput] = React.useState('')
const [goals, setGoals] = React.useState<string[]>([])

这是我的错误代码：

const addHandler = () => {
    setGoals((curGoals) => [...curGoals, { key: Math.random().toString(), value:input}])
}

这是一个打字稿提示：

类型为“(curGoals: string[]) => (string | { key: string; value: string; })[]”的参数不可分配给类型为“SetStateAction<string[]>”的参数。类型“(curGoals: string[]) => (string | { key: string; value: string; })[]”不可分配给类型“(prevState: string[]) => string[]”。类型“(string | { key: string; value: string; })[]”不可分配给类型“string[]”。输入“字符串|” { 键：字符串；值：字符串；}' 不可分配给类型“string”。输入 '{ 键：字符串；值：字符串；}' 不可分配给类型 'string'.ts(2345)

我仍然不明白为什么我的代码仍然输出这个错误。我确实在 useState 中使用了字符串类型的数组。

我该如何解决这个错误？

Answer 1

您将状态声明为string[]这意味着它是一个字符串数组。所以这个状态的项一定是 a string。{ key: Math.random().toString(), value: input }是一个具有属性value且key属性类型为 的对象string。

您可以将状态更改为类型Array<{key: string, value: string}>

const [input, setInput] = React.useState('')
const [goals, setGoals] = React.useState<
    Array<{
        key: string,
        value: string
    }>
>([])

const addHandler = () => {
    setGoals((curGoals) => [...curGoals, { key: Math.random().toString(), value: input }])
}

游乐场链接