загрузка нескольких URL с использованием fetch в React

Question

Я пытаюсь получить несколько URL-адресов в React с использованием метода Promise.all():

const urls = [
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=2",
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=3",
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=4"
];

Promise.all(urls.map(url => fetch(url).then(res => res.json()))).then(
  members => {
    console.log(members);
    this.setState({
      nearbymems: members.members
    });
  }
);

console.log возвращает все URL-адреса вместе, но не отображает их в приложении карты.Я объявил пустой массив в моем состоянии: nearbymems: []

Я также опубликую свою функцию render () для отображения данных в виде маркеров в листовке:

{this.state.nearbymems.map(members => (
  <Marker
    position={[members.location.latitude, members.location.longitude]}
    icon={myIcon1}
  >
    <Popup>
      <h1 className="lead">{members.name} </h1>

      <PopupModal initialModalState={true} />
    </Popup>
  </Marker>
))}

Спасибо.

редактировать:

Вывод массива:

 (3) [{…}, {…}, {…}]
 0:
   format:"json"
   latlon:"53,-6"
   members: Array(50)
   0:
      bio:" "
      date:""
      id:44967
      location:
         {latitude: "53.31138992", longitude: "-6.24345493"}
      name: "______"
      url:"https://thesession.org/members/___"
 __proto__: Object

Answer 1

Promise.all возвращает массив с каждым элементом, содержащий разрешенное значение соответствующего обещания.Поэтому вы не можете просто получить доступ к members из результата Promise.all.Вместо этого вы должны объединить все значения вместе, чтобы получить один большой массив значения members каждого обещания.

Это вернет все члены каждого запроса в один плоский массив.

const urls = [
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=2",
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=3",
  "https://thesession.org/members/nearby?latlon=53,-6&radius=1000&format=json&perpage=50&page=4"
];
const requests = urls.map(url => fetch(url).then(res => res.json()));
const toMembers = responses => responses.map(response => response.members);

Promise.all(requests).then(toMembers).then(members => console.log(members.flat()));

Answer 2

Вы хотите взять массив members из каждого ответа fetch, а затем объединить эти массивы в один, прежде чем перевести его в состояние nearbymems.

Promise.all(
  urls.map(url =>
    fetch(url)
      .then(res => res.json())
      .then(res => res.members)
  )
).then(members => {
  this.setState({
    nearbymems: [].concat(...members)
  });
});