React中从状态渲染对象（MovieDb实践）

Question

(MovieDb实践) 大家好，我正在尝试将存储在我的状态中的对象渲染到 dom..当我在控制台记录它时，我在控制台中得到了所有结果，但是当我尝试渲染它时，我只显示了一个结果

所以我的问题是如何获取我在控制台中获取的所有名称以呈现和访问对象的其他属性

这是我的 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;

在我的电影组件中，我只是通过道具渲染名字，我只得到名字

任何有关 refactoring/diff 循环获取结果的方法的帮助也将不胜感激谢谢！

Answer 1

问题

当您使用 results.forEach 设置状态时，您正在遍历结果并使用结果中的一个值更新状态。所以自然而然地循环的最后一个值正在更新。相反，您应该将整个结果放入状态。

渲染时循环状态。

所做的更改：

创建了一个属性数组值处于状态。
将所有结果存入状态
映射要渲染的状态值

更新代码

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;

React中从状态渲染对象（MovieDb实践）

Render Object from State in React(MovieDb Practice)

api

reactjs

themoviedb-api

问题

所做的更改：

更新代码