Реагируйте, пытаясь использовать .map для заполнения данных из нескольких API в один сопоставленный контейнер - PullRequest
Новая
       23

Реагируйте, пытаясь использовать .map для заполнения данных из нескольких API в один сопоставленный контейнер

0 голосов
/ 07 сентября 2018

Я пытаюсь на практике интегрировать данные из отдельных 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>

Просто не уверен, как подойти к этому наилучшим образом. Я только сопоставил один источник данных при заполнении результатов в контейнер. Должен ли я объединить два массива и хранить их вместе в состоянии? Я посмотрел на Лодаша, это сработало бы здесь? Или есть лучший способ сделать это, которого я просто не нашел?

Прямо сейчас у меня есть они прямо поверх другого в 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 Ответ

0 голосов
/ 07 сентября 2018

Если вы предполагаете, что хиты и случайные люди будут иметь одинаковую длину, или если вы можете каким-то образом выровнять два массива, вы можете добавить параметр 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>
)}
...