javascript - typescript 错误 '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[][]>([[], []])

这是 working codesandbox有一些 mock

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

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

但要使其正常工作，您必须向 Typescript 保证您正在设置的内容，即 data在 setData(data)也是 [TData[], TData[]] 类型.
你可以用 setData(data as [TData[], TData[]]) 之类的东西来做到这一点。