1

estoy creando un pequeño wiki de Star Wars con SWAPI en React, estoy intentando poner por cada objeto que devuelva el API (ya que devuelve un array de objetos) una seccion donde ponga la informacion sin embargo no consigo hacer que aparezca nada en la vista (disculpen si hay errores de principiante, apenas soy nuevo en esto), aqui mi codigo:

class APIMenu extends Component {
  constructor(){
    super();
    this.state = {
      films: [

      ]
    }
    this.loopFilm = this.state.films.map((film, i) => {
      return <CardFilms onClick={this.getFilm()} film={this.state.films[i]}/>
  });
  }



  getFilm = () => {
    fetch('https://swapi.dev/api/films/')
      .then(res => res.json())
      .then(data => data.results.length)
      .then(length => this.loopData(length, this.state.films, 'https://swapi.dev/api/films/'))
  }

  loopData = (length, stateId, url) => {
    for(let i = 0; i < length; i++){
      fetch(url)
        .then(res => res.json())
        .then(res => res.results[i])
        .then(data => stateId.push(data))
        .then(res => console.log('Film',this.loopFilm))
    }
  }

  render(){
    return (
    <div id="containerApi">
      {this.getFilm()}
      <div>
      <h2>Search for every type of information of Star Wars!</h2>
      </div>
      <div>
      <Search />
      </div>
      <div id="cardFilms">
        {this.loopFilm}
      </div>
    </div>
  );
  }
}

Aqui esta el codigo del componente donde quiero cargar los datos:

const CardFilms = ({ onClick, film }) => {
  return (
    <div id="card" className="cardFormat">
      <p>{film.director}</p>
      <p>Test</p>
    </div>
  );
}

Por si llega a ocuparse, aqui dejo lo que devuelve el fetch al hacer console.log: introducir la descripción de la imagen aquí

De antemano, muchas gracias, cualquier cosa hare todo lo posible por ofrecerla!

1 respuesta 1

1

Primero que nada, te recomendaría que hagas el fetch en tu componente principal(App.js) y que tengas tus estados también ahi. De esta manera pasas tu estado por props a los componentes hijos, y tambien de evitas hacer mas request a al server.

Vamos a suponer que tu componente principal sea App. Y que App tenga dos componentes hijos: Peliculas y TopTen

 App
|---Peliculas
|---|---CardPelicula
|---TopTen
|---|---CardPelicula

Ok dicho esto CardPelicula va a ser un componente que vas a poder reutilizar.

Si realizas tu fetch y tenes tu state.films en tu componente Peliculas esto va a implicar que cuando quieras mostrar tu componente TopTen vas a tener 2 opciones:

1- Realizar otro fetch y tener otro state en TopTen para poder pasarle por props a CardPelicula(no es conveniente y a además que inclumple la regla de single source of truth (SSOT))

2- Vas a tener que pasar los props a App y luego a TopTen y luego a CardPelicula (esta opcion es mas viable pero bastante tediosa. Tener hacer el seguimiento de que props estas pasando a los componentes padres e hijos se complica e complica la lectura del código.

La mejor opción es realizar tu fetch y tener tus states en App.js(claro esto mientras comenzas, cuando ya tengas más experiencia podes usar Redux)

Bueno ahora con tu código cuando realizas tu fetch

  getFilm = () => {
    fetch('https://swapi.dev/api/films/')
      .then(res => res.json())
      .then(data => data.results.length)
      .then(length => this.loopData(length, this.state.films, 'https://swapi.dev/api/films/'))
  }

  //Lo deje así
  getFilm = () => {
    fetch('https://swapi.dev/api/films/')
      .then(res => res.json())
      // aca asignas el resultado data.result a tu state
      // no hace falta que hagas el loopData aqui.
      .then(data => this.setState({films: data.results}))
      .catch(err => console.warn(err.message))
  }

El loopData y loopFilm no son necesarios con un map podes recorrer el array y mutarlo.

Podes usar componentDidMount() para realizar el fetch. Ya que este es el mejor lugar para dicha tarea como lo dice la documentación.

"componentDidMount() se invoca inmediatamente después de que un componente se monte (se inserte en el árbol). La inicialización que requiere nodos DOM debería ir aquí. Si necesita cargar datos desde un punto final remoto, este es un buen lugar para instanciar la solicitud de red."

  componentDidMount() {
    this.getFilm()
  }

y después sólo queda el map para renderizar los datos.

        <div id="cardFilms">
          {
            this.state.films.map(pelicula => <h1 key={pelicula.created}>Titulo: {pelicula.title}</h1>)
          }
        </div>

Pues bueno aca te dejo un código de ejemplo para que tengas una idea.

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

class App extends React.Component {
  state = {
    films: []
  }

  getFilm = () => {
    fetch('https://swapi.dev/api/films/')
      .then(res => res.json())
      .then(data => this.setState({films: data.results}))
      .catch(err => console.warn(err.message))
  }

  componentDidMount() {
    this.getFilm()
  }

  render(){
    return(
      <div id="containerApi" className="App">
        <div>
          <h2>Search for every type of information of Star Wars!</h2>
        </div>
        <div>
        </div>
        <div id="cardFilms">
          {
            this.state.films.map(pelicula => <h1 key={pelicula.created}>Titulo: {pelicula.title}</h1>)
          }
        </div>
      </div>
    )
  }
}

export default App;

Proba el código aquí

Espero que te sirva de ayuda.

Saludos!

1
  • 1
    De verdad muchas gracias por la respuesta tan bien explicada y por el repl, no se ni como agradecerle por la ayuda. Saludos! el 6 sep. 2020 a las 23:52

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.