Визуализация объекта из состояния в действии (MovieDb Practice)

Question

(Практика MovieDb) Привет, ребята, я пытаюсь отобразить объект, хранящийся в моем состоянии, в дом.. Когда я записываю консоль в журнал, я получаю все результаты в консоли, но когда я пытаюсь отобразить его, я просто отображаю один результат

Поэтому мой вопрос: как я могу получить все имена, которые я получаю в консоли, для рендеринга и доступа к другим свойствам объекта

вот мой код для app.js

---

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Movie from './components/Movie';


class App extends Component {

state={
  movieTitle: undefined,

  movieOverview: undefined
}

  getMovie = async(e) =>{

    e.preventDefault();
  const api_call = await fetch(`https://api.themoviedb.org/3/search/movie?query=spider&api_key=${api_key}`);

  const data= await api_call.json();

  const results=data.results;

  console.log(results);

  results.forEach((movie) => {
    console.log(movie.title);

    this.setState({
      moviesTitle:movie.title

    })
  })
}
render() {
  return (
    <div className="App">

      <button onClick={this.getMovie}>Get Movie</button>

    <Movie
      movieName={this.state.moviesTitle}
      movieInfo={this.state.movieOverview}
      />

    </div>
  );
}
}

export default App;

В моем компоненте "Фильмы" я просто отображаю имя с помощью реквизита и получаю только имя.

Любая помощь с рефакторингом /diff методами для зацикливания, чтобы получить результаты также будет оценена спасибо!

Answer 1

вопрос

Когда вы устанавливаете состояние с помощью results.forEach, вы циклически просматриваете результат и обновляете состояние одним значением из результата. Поэтому, естественно, последнее зацикленное значение обновляется. Вместо этого вы должны положить весь результат в состояние.

Зацикливать состояние при рендеринге.

Изменения сделаны:

1. Создано свойство со значением массива в состоянии.
2. сохранить все результаты в состояние
3. сопоставить значения в состоянии для отображения

Обновленный код

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import Movie from './components/Movie';


class App extends Component {

state={

  movies : []

}

  getMovie = async(e) =>{

  e.preventDefault();
  const api_call = await fetch(`https://api.themoviedb.org/3/search/movie?query=spider&api_key=${api_key}`);

  const data= await api_call.json();

  const results=data.results;


  this.setState(() => ({
    movies: results
  }))

}
render() {
  return (
    <div className="App">

      <button onClick={this.getMovie}>Get Movie</button>

      {this.state.movies.map( ({title,overview}) => {
        return(
          <Movie 
            movieTitle={title}
            movieOverview={overview}
           />

        )

      })}

    </div>
  );
}
}

export default App;