时间戳

首页 > 解决方案 > 打字稿错误'类型参数不可分配给类型参数'

javascript - 打字稿错误'类型参数不可分配给类型参数'

问题描述

我对 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[]>>([[], []])

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

标签： javascriptreactjstypescript

解决方案

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

所以，

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

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

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

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

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

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

推荐阅读