Question

import Movie from './Movie';
import axios from 'axios';
import yargsParser from 'yargs-parser';

function App() {
  const [isLoading, setLoading] = useState(true)
  const [movies, setMovie] = useState([])

  const getMovies = async () => {

    const {data: {data: { movies }}} = await axios.get("https://yts.lt/api/v2/list_movies.json?sort_by=rating");
    setMovie([{movies}])
    setLoading(false)

  }

  useEffect(() => {
    getMovies();
  }, [])

  return (
    <div className="App">
      {isLoading ? "we are loading bunch of movies" : movies.map(movie => console.log(movie))}
    </div>
  );
}

export default App;

这里的问题是，当我检查控制台时，电影状态上的map函数正在返回单个对象，包括其中的所有其他对象，

而不是分别返回所有对象。我想知道为什么？因此，当我使用以下Movie组件更新退货时，

  return (
    <div className="App">
      {isLoading ? "we are loading bunch of movies" : movies.map(movie => (
        <Movie key={movie.id} />
      ))}
    </div>
  );

这就是电影组件的外观

import React, { useState } from 'react'
import PropTypes from 'prop-types';

export default function Movie({ id, year, title, summary, poster }){
    return <h4>{title}</h4>
}

Movie.propTypes = {
    id: PropTypes.number.isRequired,
    year: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    poster: PropTypes.string.isRequired
}

电影组件未收到正确的道具。我导入prop-types进行检查，并显示

我想知道如何处理电影状态才能为电影组件获取正确的道具？

Answer 1

return (
<div className="App">
  {isLoading ? "we are loading bunch of movies" : movies.movies.map(movie => (
    <Movie key={movie.id} {...movie}/>
  ))}
</div>);

或

setMovie(movies)

在绑定数组时仔细检查，当前看来键是电影，值是数组。您想直接绑定数组

Answer 2

您应该通过电影作为道具

return (
    <div className="App">
      {isLoading ? "we are loading bunch of movies" : movies.map(movie => (
        <Movie key={movie.id} {...movie} />
      ))}
    </div>
  );

Answer 3

您需要将所有道具传递到组件中

错误代码：

 <Movie key={movie.id} {...props}/>

您可以传递此组件所需的任何信息...

Answer 4

您没有传递其余数据

 return (
    <div className="App">
      {isLoading ? "we are loading bunch of movies" : movies.map(movie => (
        <Movie key={movie.id} {...movie}/>
      ))}
    </div>
  );

Answer 5

错误似乎出在对setMovie的调用中-如果您希望状态包含电影数组，则不应该创建一个内部带有对象的数组，而只需将其更改为

setMovie(movies)

Answer 6

在上面的Movie组件中，结果对象未作为prop传递给该组件。取而代之的是，仅使用map来渲染组件，并且具有唯一键传递给组件的数组中数据的存在次数。

该代码可用作

<Movie key={movie.id} {...movie} />

OR

<Movie key={movie.id} id={movie.id} year={movie.year} title={movie.title} summary={movie.summary} poster={movie.poster} />

Answer 7

const getMovies = async () => {
    const {data: {data: { movies }}} = await axios.get("https://yts.lt/api/v2/list_movies.json?sort_by=rating");
    **setMovie([ ...movies ])**
    setLoading(false)
}

React状态上的map函数-具有获取的API数据的状态

7 个答案: