为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

蛊毒传说 2023-01-06 11:18:45

我正在开发一个带有电影 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;


查看完整描述

4 回答

?
繁星点点滴滴

TA贡献1561条经验 获得超3个赞

你应该像这样使用代码:

setMovies(res.data.results);


查看完整回答
反对 回复 2023-01-06
?
HUX布斯

TA贡献1612条经验 获得超6个赞

那是因为 response 的值在里面res.data.results。所以你只需要改变:


setMovies(res.data);

到:


setMovies(res.data.results);

如果您使用的是打字稿项目,那么您也可以使用接口从 api 映射所需的属性:


// just an examples of some properties

interface MoviesProps {

  id: number;

  video: boolean;

  vote_count: number;

  title: string;

}

并将您的状态设置为:


const [movies, setMovies] = useState<MoviesProps[]>([]);


查看完整回答
反对 回复 2023-01-06
?
素胚勾勒不出你

TA贡献1571条经验 获得超9个赞

首先,您不应该那样公开发布您的 api 密钥。


您应该熟悉从公共 API 返回的表单。


{

   "page": 1,

   "results": [...],

   "total_pages": 1000,

   "total_results": 20000

}

在这里,我们看到了我们的结果res.data。我们可以像使用 Javascript 对象一样使用它,因为 Axios 会为我们转换此 JSON。(您也可以自己使用 JSON.parse() 进行转换)


您要查找的实际movies内容封装在result数据中的数组中。在您的尝试中,您试图map(这是一个来自数组的函数)结果对象,这显然不是一个数组,因此您面临的错误。


要解决此问题,您必须保存result您所在的州


setMovies(res.data.results);


查看完整回答
反对 回复 2023-01-06
?
收到一只叮咚

TA贡献1571条经验 获得超4个赞

来自 api 的数据作为一个对象出现,{"page":1, "results":[...]}因此要在您的状态下设置电影的数组,您应该按如下方式访问结果数组;



  useEffect(() => {

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

      .then(res => {

        setMovies(res.data.results);


      }).catch(error  => 

         console.log(error)

      )

  },

    []

  );

避免发布您的 API 密钥


查看完整回答
反对 回复 2023-01-06
  • 4 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信