时间戳

首页 > 解决方案 > 无法在 Typescript 中映射数组

reactjs - 无法在 Typescript 中映射数组

问题描述

我正在尝试在 Typescript 中的数组上使用 .map() 函数。

我运行以下代码：

Promisefunction().then((data : [{item: String}]) => {

    data.map((Object) => {
       console.log(Object.attribute)
   })

})

在控制台中，我得到了预期的结果，它似乎工作正常，但随后程序崩溃，我收到以下错误：

Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

我认为这是因为 Typescript 不知道 Data 是一个数组，但我已经在上面建立了它。所以我很困惑。

任何帮助将不胜感激，谢谢。

**编辑 1：添加了 promisefunction 的主体 **

export default function promiseFunction(){
    return new Promise<any[]>(function(resolve, reject){
        const { data, loading, error, fetchMore } = useQuery(
            QUERY,
            {
                variables: {
                    first: 15,
                    offset: 0
                },
                errorPolicy: 'all'
            });

            if(data){
                resolve(data.getData);
            }
            else if(error){
                reject("broke");
            }

    })

}

标签： reactjstypescript

解决方案

该错误发生在运行时，而不是编译时。所以打字稿并没有真正参与。返回的承诺Promisefunction显然没有解析为数组。Typescript 不会知道这一点，因为它只知道你在编译时提供给它的信息，而且这些信息显然是有缺陷的。如果您可以分享 Promisefunction 的代码，我们也许可以诊断它。

编辑：随着您的最新更新，有更多的迹象表明出了什么问题，但也有几个新问题。您正在尝试在任意函数中使用反应钩子。这是不支持的。钩子只能在功能组件内部和其他钩子内部使用。

因此，您的代码正在运行，然后在不应调用它的上下文中调用 useQuery。使用查询返回一个没有数据的数据对象，你用 undefined 解决你的承诺。您可能告诉 typescript 它是一个Promise<any[]>，但这是不正确的。由于您给打字稿提供了不正确的信息，它会从那时起假定不正确的信息，导致当您尝试做时它无法指出您的问题data.map

我很难向你推荐一个行动方案，因为你似乎在滥用手头的工具。我不明白你为什么首先要在承诺中包装一个钩子。

推荐阅读