【问题标题】:Object key 'undefined' [duplicate]对象键“未定义”[重复]
【发布时间】:2019-01-19 04:08:22
【问题描述】:

我得到一个来自 API 的对象,并在其中创建带有其他 API 响应的新对象,例如:

API 响应 1:Obj: {a: 1, b: 2}

API 响应 2:3

创建对象:Obj.c = 3

最终结果:Obj:{a: 1, b: 2, c: 3}

问题:

console.log(Obj) return Obj: {a: 1, b: 2, c: 3}

console.log(Obj.c) return undefined

尝试在属性中的.map 之后提供console.log 时,我无法访问创建的属性,返回undefined。但是,当我在任何对象上给出console.log 时,创建的属性就在那里。

我的代码:

async getGeneralInfo(token, seed) {
    try {
        API_HEADER.headers.Authorization = token;
        let responseAvaliableCoins = await axios.get(
            BASE_URL + "/coin",
            API_HEADER
        );

        let avaliableCoins = responseAvaliableCoins.data.data.coins;

        avaliableCoins.map(async (coin, index) => {
            if (coin.status === "active") {
                let responseCreateAddress = await axios.post(
                    BASE_URL + "/coin/" + coin.abbreviation + "/address",
                    { seed },
                    API_HEADER
                );

                avaliableCoins[index].address =
                    responseCreateAddress.data.data.address;

                let responseBalance = await axios.get(
                    BASE_URL +
                    "/coin/" +
                    coin.abbreviation +
                    "/balance/" +
                    coin.address,
                    API_HEADER
                );

                avaliableCoins.token = responseBalance.headers[HEADER_RESPONSE];
                avaliableCoins[index].balance = responseBalance.data.data;
            } else {
                avaliableCoins[index].address = undefined;
                avaliableCoins[index].balance = undefined;
            }
        });

        console.warn(avaliableCoins[0].balance); //undefined
        console.warn(avaliableCoins[0]["balance"]); //undefined
        console.warn(avaliableCoins[0].address); //undefined
        console.warn(avaliableCoins[0]["address"]); //undefined

        console.warn("avaliableCoins", avaliableCoins); //All objects are here
        console.warn("avaliableCoins[0]", avaliableCoins[0]); //All objects are here

        return avaliableCoins;
    } catch (error) {
        internalServerError();
        return;
    }
}

更新 -----

【问题讨论】:

  • 你检查以确保0索引有东西。我可能只是转储整个 availableCoins 数组以查看您正在使用什么。 console.log(avaliableCoins)
  • 我的理论是您使用的是 Google Chrome,当您记录对象时会显示“实时”视图。您的代码不是 awaiting 从 .map 返回的所有承诺的结果。
  • const coinUpdates = availableCoins.map( ... etc ... ); await Promise.all(coinUpdates);
  • 对象旁边的i 表示它刚刚被评估过。因此,在您写入控制台时,它的值可能不同。

标签: javascript arrays api object axios


【解决方案1】:

map中使用的函数是异步的。

现在map 正在所有硬币上被调用,在所有异步数据可以返回之前,代码已经转移到console.warn() 调用。

availableCoins 最终将在返回时使用所有异步数据进行更新,但这里存在竞争条件,因为代码并未明确等待这种情况发生。

这是推荐的方法:

  • map 中的每个async 调用返回一个修改后的项目,这将返回一个Promise,当async 函数完成时将解析为修改后的项目。
  • 使用Promise.all()等待Promises的数组
  • 返回结果数组

以下是演示该方法的简化版本:

const getData = () => {
  return Promise.resolve('data');
}

export const getGeneralInfo = async () => {
  let avaliableCoins = [
    { a: 1 },
    { a: 2 }
  ]

  const promises = avaliableCoins.map(async (coin) => {
    let response = await getData();
    // modify coin and return it
    coin.data = response;
    return coin;
  });

  const updatedCoins = await Promise.all(promises);

  console.log(updatedCoins); // [{a: 1, data: 'data'}, {a: 2, data: 'data'}]

  return updatedCoins;
}

修改后的函数如下所示:

async getGeneralInfo(token, seed) {
  try {
    API_HEADER.headers.Authorization = token;
    let responseAvaliableCoins = await axios.get(
      BASE_URL + "/coin",
      API_HEADER
    );

    let avaliableCoins = responseAvaliableCoins.data.data.coins;

    const promises = avaliableCoins.map(async (coin) => {
      if (coin.status === "active") {
        let responseCreateAddress = await axios.post(
          BASE_URL + "/coin/" + coin.abbreviation + "/address",
          { seed },
          API_HEADER
        );

        coin.address =
          responseCreateAddress.data.data.address;

        let responseBalance = await axios.get(
          BASE_URL +
          "/coin/" +
          coin.abbreviation +
          "/balance/" +
          coin.address,
          API_HEADER
        );

        coin.token = responseBalance.headers[HEADER_RESPONSE];
        coin.balance = responseBalance.data.data;
      } else {
        coin.address = undefined;
        coin.balance = undefined;
      }
      return coin;
    });

    availableCoins = await Promise.all(promises);

    console.warn(avaliableCoins[0].balance); //undefined
    console.warn(avaliableCoins[0]["balance"]); //undefined
    console.warn(avaliableCoins[0].address); //undefined
    console.warn(avaliableCoins[0]["address"]); //undefined

    console.warn("avaliableCoins", avaliableCoins); //All objects are here
    console.warn("avaliableCoins[0]", avaliableCoins[0]); //All objects are here

    return avaliableCoins;
  } catch (error) {
    internalServerError();
    return;
  }
}

【讨论】:

    猜你喜欢
    • 2021-10-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-22
    • 2018-04-08
    • 1970-01-01
    • 2018-05-20
    • 2021-12-01
    • 2019-12-24
    相关资源
    最近更新 更多