时间戳

首页 > 解决方案 > 显示数组列表，数组长度为 0 并且元素在反应中未定义

javascript - 显示数组列表，数组长度为 0 并且元素在反应中未定义

问题描述

所以，基本上我在两个不同的函数中有两个 api 调用，它们是从单个组件页面调用的。await 函数应用于它们中的每一个，因为从第一个 api 提供的每个响应都用作第二个 api 的参数。对于第一个 api 调用，在函数内部，响应被推送到名为 all_countries 的数组中。

const apiCall = getCountry(req)
      .then((response) => {
        all_countries.push(...response);
        dispatch(actionSuccess(NICE_ONE, response));
      })
      .catch((error) => {
        dispatch(actionFailure(NICE_ONE, error));
      });

all_countries 中的每个数组对象都将被映射，并且值（即来自 all_countries 的每个对象中存在的国家代码）用于调用另一个 api 以获取响应，但我的问题是在控制台从第二个函数记录 all_countries 时，它显示空数组的符号。打开数组后，它会列出所有国家/地区。当我在控制台记录数组的长度时，它显示 0，在控制台记录 all_countries [0] 等元素时，它显示未定义。为什么会这样？有人可以帮帮我吗？ 这会显示在控制台上

展开后，会显示： 在此处输入图像描述

所以，我发现在添加 all_countries.push 时，intellij 向我显示警告，响应不是数组类型，而是 AllCountryRes 类型。

AllRelaysRes 类型定义为：

export type AllRelaysRes = {
  logo: string;
  ipv4: string;
  ipv6: string;
  port: string;
  location: {
    id: number;
    ip: string
  };
};

getCountry 函数是这样的：

export const getCountry = (url: string): Promise<AllRelaysRes> => {
  ExternalApi.setBaseUrl(url);
  return ExternalApi.apiCall<AllRelaysRes>({
    method: "GET",
    url: "something",
  });
};

来自 api 的响应是一个对象数组。我只是打字稿的初学者并尝试了一些东西。我的问题是如何将响应类型设为对象 AllRelayRes 的数组？不返回 ExternalApi.apiCall 尖括号 AllRelayRes 意味着预期的响应是 AllRelayRes 数组，因为 AllRelayRes 保留在尖括号内？我该如何解决？这是我得到数组长度为0的真正问题吗？

标签： javascriptarraysreactjspromise

解决方案

我相信您正在处理 type 对象的集合AllRelayRes，而不是数组。它[]在控制台中显示，但这代表一个集合。

如果要将其用作数组，请在函数中指定类型<AllRelaysRes[]>

export const getCountry = (url: string): Promise<AllRelaysRes[]> => {
  ExternalApi.setBaseUrl(url);
  return ExternalApi.apiCall<AllRelaysRes[]>({
    method: "GET",
    url: "something",
  });
};

然后您应该能够以数组格式操作数据

如果您想将其保留为一个集合，您可以使用

let x, key, obj
for(x in AllRelayRes) {
    key = x; // 0, 1, 2 .. the index
    obj = AllRelayRex[x] // the object
    // country_name = AllRelayRex[x].country_name, etc
}

推荐阅读