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

Posted 2023-02-14

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

【英文标题】：React trying to use .map to populate data from multiple APIs into the same mapped container

【发布时间】：2019-02-12 05:16:57

【问题描述】：

我正在尝试练习集成来自不同 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 );

  

谢谢！

【参考方案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>
)

【讨论】：

显然在其他情况下也可以这样做！

"无法读取未定义的属性 'title'。" hits 来自状态，就像 randomPeople 一样。会不会是数组大小不一样？

如果 randomPeople 更大，那么肯定是这种情况，另一种可能是 hits 还没有被获取，所以它仍然是一个空数组。如果this.state.isLoading 仍然为真，我会在render() 的顶部进行一些验证以返回null，并在您的构造函数中初始化isLoading: true

很好，这是因为数组的大小不同。我会将此标记为答案，但我很好奇：将映射数据从两个以上来源拉到同一个容器中的理想方法是什么？使用一个作为索引似乎是一种解决方法，但我可能是错的。

这个应用程序（它实际上只是一个 React 组件）的目的是找到将多个数据 GET 填充到同一个容器中的最佳方法。这里的 API 是 HackNoon 和 Random Person Generator。一个更实际的例子可能是从一个 api 中提取电影标题，或者从不同的 api 中提取电影的图片。但我明白你的意思......最终需要有一个目的，这就是需要就如何最好地对传入的 API 数据进行排序做出真正决定的地方。我知道这是一个完全不同的话题，但在这里再次感谢您的帮助。