0

queria saber como podia iterar sobre el array que estoy trayendo con fetch, pero no necesito todo ya que me trae como 50 items y solo quiero usar 10, lo hice con un for pero cuando le hago un console log me tira "undefined"

       const Api = () => {
  const [name, setName] = useState([]);

  useEffect(() => {
    fetch("https://api.jikan.moe/v3/top/manga")
      .then((res) => res.json())
      .catch((err) => console.log(err))
      .then((res) => setName(res.top));
  });
  for (let i = name.length; i <= 4; i++) {
    console.log(name[i]);
  }

  return <div>{/* <p>{title}</p> */}</div>;
};
1
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! lee sobre promesas.. tu codigo es asincronico.
    – gbianchi
    Commented el 19 oct. 2021 a las 0:52

1 respuesta 1

0

El error lo tienes en este bucle:

 for (let i = name.length; i <= 4; i++) {
    console.log(name[i]);
  }

Le estás ordenando al bucle for que empiece a contar desde name.lenght (que vale 50) hasta que i valga 4 o menos. Naturalmente nunca entra en el bucle dado que i siempre vale más de 4.

De todas formas, te propongo que eches un vistazo al siguiente código, donde "cortamos" el array con slice dentro del fetch, con lo que ya no tienes que utilizar el bucle for:

const App = () => {
  const [mangas, setMangas] = React.useState([]);

  React.useEffect(() => {
    fetch("https://api.jikan.moe/v3/top/manga")
    .then(res => res.json())
    .then(res => {
      if (res.top) {
        // Pasamos unicamente los primeros 10 mangas
        setMangas(res.top.slice(0, 10))
      } else {
        throw new Error('Los datos remotos son incompletos.')
      }
    })
    .catch(e => {
      // Mostramos el error en la consola.
      // Aquí también podemos mostrar información del error al usuario
      console.trace(e)
    }) 
  }, []);

  return <ul>
    {mangas.map(manga => (
      <li key={manga.mal_id}>
        {manga.title}
      </li>
    ))}
  </ul>
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.