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

interface MoviesProps {

  id: number;

  video: boolean;

  vote_count: number;

  title: string;

}

并将您的状态设置为：

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

Answer 3

首先，您不应该那样公开发布您的 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);

Answer 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 密钥