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，带有一些模拟内容

如果要更加具体，请将其定义为Tuple，而不是通常的数组：

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

但是要使其正常工作，您必须向Typescript确保data中设置的setData(data)也是[TData[], TData[]]类型。

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

打字稿错误“类型的参数无法分配给类型的参数”

1 个答案: