Typescript 错误“类型参数不可分配给类型参数”

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'

我的 function fetchDataController返回一个由 arrays 元素组成的数组。

我的类型如下：

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

我试过做类似的事情，

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

但这似乎不起作用。 我在这里想念什么？

Answer 1

你很亲密。 Array<...>需要一个参数，即数组中项目的类型。 所以你可以做类似Array<TData[]>的事情。 如果您不想使用Array<...> ，您也可以执行类似TData[][]的操作

所以，

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

这是一个带有一些模拟的工作代码框

---

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

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

但要使其正常工作，您必须向 Typescript 保证您正在设置的内容，即setData(data) data的数据也是[TData[], TData[]]类型。

您可以使用setData(data as [TData[], TData[]])