Question

我已经对这个API调用了奇迹，我正在将其导出并保存为React中的状态。

 avengers.map((avenger, index) => {
  const url = `
    http://gateway.marvel.com/v1/public/characters/${avenger}?ts=${ts}&apikey=${publicKey}&hash=${hash}
  `
  fetchMarvelData(url, index)
})

let fetchedData = {}

async function fetchMarvelData (url, index) {
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  const data = await response.json()
  fetchedData[`avenger${index}`] = data.data.results[0]
}

export default fetchedData

当我尝试迭代Object.keys（fetchedData）时，我得到一个空数组。不太清楚这里有什么问题，感谢任何帮助。

React state log

编辑：澄清了我想要迭代的内容。

编辑：添加了React状态console.log

的图像

Answer 1

根据你上面给出的控制台输出。顶部有一个空的物体，里面没有道具。

Answer 2

那是因为您正在导出一个空对象。由于您进行的异步调用不是await，因此fetchedData在导出时只是一个空对象。

如果您希望之前完成所有请求，可以执行以下操作：

const hash         = '...'; // Replace
const ts           = '...'; // Replace
const publicKey    = '...'; // Replace
const fetchOptions = {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
};

const fetchAvenger = async avenger => {
  const url      = `http://gateway.marvel.com/v1/public/characters/${avenger}?ts=${ts}&apikey=${publicKey}&hash=${hash}`;
  const response = await fetch(url, fetchOptions);
  const data     = await response.json();

  return data.data.results[0];
};

const fetchAvengers = async avengers => {
  const remoteAvengers = [];
  await Promise.all(avengers.map(async avenger => {
    const remoteAvenger = await fetchAvenger(avenger);
    remoteAvengers.push(remoteAvenger);
  }));
  return remoteAvengers;
};

export default fetchAvengers;

然后在你的组件中你可以像这样添加复仇者状态：

import fetchAvengers from 'path/to/fetchAvengers';
// ...

// Show a loader or something?
this.setState({ isFetchingAvengers: true });

// Waits for all avengers to be fetched from api
const avengers = await fetchAvengers([...]);

// Update state, hide loader
this.setState({ avengers, isFetchingAvengers: false });

我还没有对代码进行测试，因此可能会有一些错误，让我知道，我会尝试提供帮助。

对象键迭代问题

2 个答案: