打字稿错误'argument of type is not assignable to parameter of type'

Question

我对TS还比较陌生，遇到了一个奇怪的问题。我似乎已经定义了所有内容，但它似乎无法识别我为数据键入的内容。

这是我所拥有的：

const Component = () => {
const [data, setData] = React.useState([[], []])
React.useEffect(() => {
fetchData()
}, [])
const fetchData = React.useCallback(async () => {
const data = await fetchDataController()
setData(data)
^^^^ error
})
}

这引发了错误，

Argument of type 'Element[][]' is not assignable to parameter of type 'SetStateAction<never[][]>'
Type 'Element[][]' is not assignable to type 'never[][]'
Type 'Element[]' is not assignable to type 'never[]'
Type 'Element is not assignable to type 'never'

我的函数fetchDataController返回元素数组的数组。

我的类型如下：

type TData = {
id: string,
desc: string
}

我试过做一些类似的事情

const [data, setData] = React.useState<Array<TData[], TData[]>>([[], []])

但这似乎并不奏效。我在这里错过了什么？

Answer 1

你很接近。Array<...>需要一个参数，即数组中项的类型。所以你可以做一些类似Array<TData[]>的事情。如果你不想使用Array<...>，你可以做一些类似TData[][]的事情以及

所以，

React.useState<TData[][]>([[], []])

这是一个工作的代码沙盒与一些模拟

---

如果你想更具体，并将其定义为元组，而不是通常的数组：

React.useState<[TData[], TData[]]>([[], []])

但要做到这一点，您必须向Typescript保证您正在设置的内容，即setData(data)中的data也是[TData[], TData[]]类型。

你可以用setData(data as [TData[], TData[]])这样的东西来做到这一点