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设置状态时，将循环搜索结果，并使用结果中的一个值更新状态。因此，自然会循环更新最后一个值。相反，您应该将整个结果放入状态。

渲染时环绕状态。

所做的更改：

创建了一个状态为数组值的属性。
将所有结果存储到状态
映射状态值以呈现

更新代码

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练习）

1 个答案:

问题

所做的更改：

更新代码