Question

我最初只有一个URL来获取数据，我的应用程序运行完美。但后来我意识到我必须使用两个不同的URL来获取我需要的数据。所以我稍微更改了代码。除getData函数外，一切都差不多，我使用map来迭代URL列表并获取数据。我的应用程序现在非常错误。

问题：

当我搜索流光时，它有时从不在页面上呈现结果。即使"search for your favorite streamer!"现在不等于this.state.value，但' '消息也不会消失。但是当我改变输入时，它会被无处渲染。

有时无法呈现获取的数据，我得到的FinderResultContainer呈现时没有数据。（没有名字，没有img，没有离线/在线。）

这里到底发生了什么？我觉得这是因为我没有使用组件生命周期方法。如果是这样，那么我到底需要做什么？我是初学者，所以我需要一些指导。

getData(value) {
let streamerData = [];
let streamerInfo = {};

let urls = ['https://wind-bow.gomix.me/twitch-api/streams/' + value, 'https://wind-bow.gomix.me/twitch-api/users/' + value];

urls.map(function(each, index) {
  fetch(each).then((response) =>
  response.json()
).then((streamer) => streamerData.push(streamer)).then(()=>streamerInfo[index]=streamerData[index]).then(()=>{if (index === urls.length-1){this.setState({streamer: streamerData})}})},this)
}

https://codepen.io/brood915/pen/OWQpmy

Answer 1

fetch是异步的，会返回一个承诺，因此您无法确切知道何时完成。您可以使用Promise.all()等待每个承诺解决然后处理数据（请注意，所有承诺将同时执行，因此如果您有大量的URL，您将每秒发送大量请求）。

编辑：我看到你的笔并简化了代码，这对我来说很好。这里没有空白组件。请注意，只有需要才能在返回承诺时使用then。

getData(value, type) {
  let urls = [
    'https://wind-bow.gomix.me/twitch-api/streams/' + value,
    'https://wind-bow.gomix.me/twitch-api/users/' + value
  ];

  const getJson = url => fetch(url).then(res => res.json());

  Promise.all(urls.map(getJson))
    .then(streamer => {
      if (type === "search") {
        this.setState({ streamer });
        console.log("searching")
      } else {
        console.log("displaying");
        this.getStreamer(streamer[0], streamer[1]);
      }
    }).catch(err => {
      console.log('Something went wrong...')
    })
}

为什么我的搜索功能有时会这么慢+错误？

1 个答案: