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

Question

我最初只有一个URL来获取数据，我的应用程序运行得很完美。但是后来我意识到我必须使用两个不同的URL来获取我需要的数据。所以我稍微修改了一下代码。除了我使用map迭代URL列表并获取数据的getData函数之外，所有内容都基本相同。我的应用程序现在真的有buggy了。

问题：

当我搜索streamer时，它有时永远不会在页面上呈现结果。即使this.state.value现在不等于' '，消息"search for your favorite streamer!"也不会消失。但当我更改输入时，它会突然呈现出来。

它有时无法呈现所获取的数据，并且我呈现的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，所以您不知道它将在什么时候完成。您可以使用Promise.all()等待每个promise解析，然后处理数据(请注意，所有promise将同时执行，因此如果您有大量的urls，则每秒将发送大量请求)。

编辑:我看到了你的钢笔，简化了代码，这对我来说很好。此处没有空白组件。请注意，您只需要在返回promises时使用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...')
    })
}