在 React 中使用 API 信息映射元素

Question

我正在开发一个带有电影 API ( https://developers.themoviedb.org ) 的 React 应用程序。问题是我正在尝试将来自 API 的信息放入卡片中。我为此使用 useState 和 useEffect。另外，我使用 Axios 从 API 中获取它。我不知道，我看不到什么不起作用。错误消息是 map is not a function，而且我认为我的 useEffect 有问题。请帮忙！

const Home = () => {

  const [movies, setMovies] = useState([]);

  useEffect(() => {

    axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=**APIKEY**")

      .then(res => {

        setMovies(res.data);

      }).catch(console.log)

  },

    []

  );

  return (

    <section id="main-page">

      <div className='list-main-page'>

        <a href='#'>

          <h2>

            Películas que son tendencia

            <FontAwesomeIcon className='arrow-list' icon={faArrowRight} />

          </h2>

        </a>

        <div className='card-list-container'>

        {movies.map((movie, i) => {

            return (

              <Card key={i} image={movie.poster_path} />

            )})

          }

        </div>

      </div>

    </section>

  )

};

export default Home;

Answer 1

你应该像这样使用代码：setMovies(res.data.results);

Answer 2

那是因为 response 的值在里面res.data.results。所以你只需要改变：setMovies(res.data);到：setMovies(res.data.results);如果您使用的是打字稿项目，那么您也可以使用接口从 api 映射所需的属性：// just an examples of some propertiesinterface MoviesProps {&nbsp; id: number;&nbsp; video: boolean;&nbsp; vote_count: number;&nbsp; title: string;}并将您的状态设置为：const [movies, setMovies] = useState<MoviesProps[]>([]);

Answer 3

首先，您不应该那样公开发布您的 api 密钥。您应该熟悉从公共 API 返回的表单。{&nbsp; &nbsp;"page": 1,&nbsp; &nbsp;"results": [...],&nbsp; &nbsp;"total_pages": 1000,&nbsp; &nbsp;"total_results": 20000}在这里，我们看到了我们的结果res.data。我们可以像使用 Javascript 对象一样使用它，因为 Axios 会为我们转换此 JSON。（您也可以自己使用 JSON.parse() 进行转换）您要查找的实际movies内容封装在result数据中的数组中。在您的尝试中，您试图map（这是一个来自数组的函数）结果对象，这显然不是一个数组，因此您面临的错误。要解决此问题，您必须保存result您所在的州setMovies(res.data.results);

Answer 4

来自 api 的数据作为一个对象出现，{"page":1, "results":[...]}因此要在您的状态下设置电影的数组，您应该按如下方式访问结果数组；&nbsp; useEffect(() => {&nbsp; &nbsp; axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=API_KEY")&nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; setMovies(res.data.results);&nbsp; &nbsp; &nbsp; }).catch(error&nbsp; =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(error)&nbsp; &nbsp; &nbsp; )&nbsp; },&nbsp; &nbsp; []&nbsp; );避免发布您的 API 密钥