Как мне вернуть только часть массива из вызова API?

Question

У меня есть огромный список из примерно 50 фотографий собак, которые я беру из API в компонент реакции, и я хочу отобразить только первые 10. Я написал следующую функцию, чтобы попытаться отфильтровать только первые 10 URL-адресов фотографий в массиве

setData = async () => {
  const x =  await fetch('https://dog.ceo/api/breed/hound/images')
  const y = await x.json()
  const z = await y.message
  let newArr =[]
  for (let i=0; i<z.length; i++){
    if (i<=10){
      newArr.push(z[i])
    }
  }
  return newArr
}

затем использовали результат этого для установки состояния

componentDidMount(){
  const dogList = this.setData()
  this.setState({
    dog: dogList
  })
}

.... который затем должен был отображать только первые 10 фотографии собак:

render() {
  return (
    <div>
      <h1>Rate My Dogue</h1>
      {
        this.state.dog.map(doggie => {
          return <img className = 'img' src = {doggie}></img>
        })
      }
    </div>
  );
}

}

и неудивительно, что это не сработало. Есть ли у кого-нибудь предложения, как я могу сократить свой вызов API?

Вот полный компонент:

import React from 'react';
import './styles.css'


class App extends React.Component {
constructor(){
  super()
  this.state = {
    dog: []
  }
}

setData = async () => {
  const x =  await fetch('https://dog.ceo/api/breed/hound/images')
  const y = await x.json()
  const z = await y.message
  let newArr =[]
  for (let i=0; i<z.length; i++){
    if (i<=10){
      newArr.push(z[i])
    }
  }
  return newArr
}


componentDidMount(){
  const dogList = this.setData()
  this.setState({
    dog: dogList
  })
}

render() {

  return (
    
     this.state.loading ? <h1> Dogues Loading.....</h1>
    :
    <div>
      <h1>Rate My Dogue</h1>
      {
        this.state.dog.map(doggie => {
          return <img className = 'img' src = {doggie}></img>
        })
      }
    </div>
    
  );
}

}
export default App;

Answer 1

У вас есть функция asyn c (setData), которая возвращает обещание, и чтобы получить значение этой функции asyn c, вам нужно выполнить метод .then (). Итак, что-то вроде этого в вашем componentDidMount

componentDidMount() {
this.setData()
  .then((res) => {
    this.setState({
      dog: res,
    });
  })
  .catch((error) => console.log(error));
 }

Или сделайте свой componentDidMount asyn c функцией и дождитесь результатов setData.

async componentDidMount() {
try {
  const dogList = await this.setData();
  this.setState({
    dog: dogList,
  });
} catch (error) {
  console.log(error);
}
}

В вашем вопросе вы указали, что хотел первые 10 фотографий, поэтому ваш setData должен иметь такую ​​проверку, поскольку ваш l oop начинается с индекса 0.

setData = async () => {
const x = await fetch("https://dog.ceo/api/breed/hound/images");
const y = await x.json();
const z = await y.message;

let newArr = [];
for (let i = 0; i < z.length; i++) {
  if (i <= 9) {
    newArr.push(z[i]);
  }
 }
return newArr;
};

Пожалуйста, не забудьте добавить ключевую опору на вашу карту в функции рендеринга.