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

Question

所以，基本上我在两个不同的函数中有两个 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] 等元素时，它显示未定义。为什么会这样？有人可以帮我吗？ This gets shown on console

展开后显示如下： enter image description here

所以，我发现在添加 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 的数组？ return ExternalApi.apiCall angular 括号 AllRelayRes 是否意味着预期的响应是一个 AllRelayRes 数组，因为 AllRelayRes 保留在 angular 括号内？我该如何解决？这是我得到数组长度 0 的真正问题吗？

Answer 1

我相信您正在处理 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
}

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

Array list is shown, array length is 0 and elements are undefined in react

javascript

arrays

promise

reactjs