在 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;

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

对于循环获取结果的重构/差异方法的任何帮助也将不胜感激 谢谢！

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;