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

Question

我正在尝试练习从单独的 API 集成数据，但我无法概念化正确的方法是什么。

基本上，我有两个要从中获取的示例 API: 1. const API = ' https://hn.algolia.com/api/v1/search?query= '; (this.state.hits) const 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 的长度相同，或者如果您可以以某种方式对齐两个数组，则可以将索引参数添加到您的 .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>
)}