如何用数组和Typescript中的object设置状态？

Question

这就是我声明 state 的方式

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

这是我的错误代码：

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

这是一个 typescript 提示：

“(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

您将 state 声明为string[]这意味着它是一个字符串数组。 所以这个 state 的一项必须是一个string 。 { key: Math.random().toString(), value: input }是一个 object，具有value和key类型的属性string 。

您可以将 state 更改为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 }])
}

游乐场链接