React 尝试使用 .map 将来自多个 API 的数据填充到同一个映射容器中

Question

我正在尝试练习集成来自不同 API 的数据，但我在概念化什么是正确的做法时遇到了麻烦。

基本上，我有两个从中获取的示例 API： 1. 常量 API = 'https://hn.algolia.com/api/v1/search?query='; (this.state.hits) 常量 DEFAULT_QUERY = 'redux'; 和 2.https://randomuser.me/api/?results=50(this.state.randomPeople)

我通过 componentDid Mount 中调用的方法将它们拉到自己的状态数组中。

this.state = {
      hits: [],
      randomPeople: [],

    };

理想情况下，我想映射它们并从每个 .map 结果中获取数据以填充到单个容器中，例如：

<div>
<img src={random.thumbnailPic}/>
<h3>{random.name.first}</h3>
<h3>{random.name.last}</h3>
<p>{hit.title}</p>
</div>

只是不确定如何以最好的方式解决这个问题。将结果填充到容器时，我只映射了一个数据源。我应该组合这两个数组并将它们存储在一起吗？我看了看 Lodash，这在这里有用吗？或者有没有更好的方法来完成这个我还没有找到？

现在我只是在 render() 中将它们放在另一个之上：

{hits.map(hit => (
    <div key={hit.objectID}>
         <a href={hit.url}>{hit.title}</a>
     </div>
 ))}

 {randomPeople.map(rando => (
     <div key={random.email}>
         <img src={random.picture.medium} />
          <h3>Author: {random.name.first} {random.name.last}</h3>
      </div>
  ))}

这是我的方法：

fetchHits = () => {
    fetch(API + DEFAULT_QUERY)
      .then(response => {
        if (response.ok) {

          return response.json();
        } else {
          throw new Error('Something went wrong ... ');
        }
      })
      .then(data => this.setState({ hits: data.hits, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  };

  fetchRandomPeople = () => {
    fetch('https://randomuser.me/api/?results=50')
      .then(results => results.json())
      .then(data => this.setState({ randomPeople: data.results }));
  };

  componentDidMount() {
    this.fetchRandomPeople();
    this.fetchHits();
    this.setState({ isLoading: true });

  }

谢谢！

Answer 1

如果您假设 hits 和 randompeople 的长度相同，或者您可以以某种方式对齐两个数组，您可以将 index 参数添加到您的 .map() 函数中：

{randomPeople.map((rando, i) => (
  <div key={rando.email}>
    <img src={rando.thumbnailPic}/>
    <h3>{rando.name.first}</h3>
    <h3>{rando.name.last}</h3>
    <p>{hits[i].title}</p>
  </div>
)}