如何使用诸如 useEffect 和 useState 之类的 Hooks 在 Api 中使用 Map 函数答案

【问题标题】：How to use Map function in react js with Api using Hooks like useEffect and useState如何使用诸如 useEffect 和 useState 之类的 Hooks 在 Api 中使用 Map 函数
【发布时间】：2021-11-03 16:04:31
【问题描述】：

您好，我是新来的反应并开始学习新东西。我实际上陷入了一种我知道如何实现解决方案但我不知道实现部分的情况。

我正在尝试通过 Await Async 使用 API 并在我的卡中显示数据。我可以在控制台日志中看到结果，但在卡片中看不到。

据我所知，我必须使用地图功能将数据与我的卡映射以查看所有数据。如有错误请指正。

另外，如果您可以让我知道接下来需要做什么，请查看我的代码以及效果如何。

import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardMedia,
} from "@material-ui/core";

const cardStyle = {
  cardMain: {
    maxWidth: "300px",
    maxHeight: "300px",
    margin: "10px",
  },

  cardImage: {
    height: "150px",
    backgroundImage:
      "url(" +
      "https://images.unsplash.com/photo-1517971129774-8a2b38fa128e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" +
      ")",
    marginLeft: "7px",
    marginRight: "7px",
    marginTop: "5px",
  },
};

const Produts = () => {
  const [movieData, setMovieData] = useState([]);

  const getMovieList = async () => {
    const url =
      "http://api.themoviedb.org/3/search/movie?api_key=myapikey&query=Avengers";

    const response = await fetch(url);
    try {
      const responseJson = await response.json();
      console.log(responseJson);
      setMovieData = responseJson.results;
    } catch (err) {
      console.error(err);
    }
  };

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

  return (
    <>
      <Card style={cardStyle.cardMain}>
        <CardActionArea>
          {setMovieData.original_title}
          <CardMedia style={cardStyle.cardImage}>
            {setMovieData.original_image}
          </CardMedia>
          <CardContent>{setMovieData.original_date}</CardContent>
        </CardActionArea>
        <CardActions style={cardStyle.cardButton}>
          <Button>Watch</Button>
          <Button>Like</Button>
          <Button>Rent</Button>
        </CardActions>
      </Card>
    </>
  );
};

export default Produts;

非常感谢任何帮助或建议。

【问题讨论】：

你为什么写setMovieData = (responseJson.results)？具体来说，为什么是等号？ setMovieData 是您调用的函数，用于更新状态。见daveceddia.com/usestate-hook-examples
setMovieData 是一个函数。所以将结果作为参数传递 - setMovieData(responseJson.results)。同样在您的 jsx 代码中，即在 return 中，您应该使用包含实际值的 movieData 而不是 setMovieData 这是一个函数

标签： javascript arrays reactjs api mern

【解决方案1】：

试试这个：

const Produts = () => {
  const [movieData, setMovieData] = useState([]);

  const getMovieList = async () => {
    const url =
      "http://api.themoviedb.org/3/search/movie?api_key=myapikey&query=Avengers";

    const response = await fetch(url);
    try {
      const responseJson = await response.json();
      console.log(responseJson);
      setMovieData(responseJson.results);
    } catch (err) {
      console.error(err);
    }
  };

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

  return (
    <>
      movieData.map ((movie) => (
      <Card style={cardStyle.cardMain}>
        <CardActionArea>
          {movie.original_title}
          <CardMedia style={cardStyle.cardImage}>
            {movie.original_image}
          </CardMedia>
          <CardContent>{movie.original_date}</CardContent>
        </CardActionArea>
        <CardActions style={cardStyle.cardButton}>
          <Button>Watch</Button>
          <Button>Like</Button>
          <Button>Rent</Button>
        </CardActions>
      </Card>
      ))
    </>
  );
};

【讨论】：

谢谢一百万，一定会试试看它是否有效，先生@nokwiw

【解决方案2】：

首先你使用 useState 错误尝试这种方式 setMovieData(responseJson.results) 然后将其用于地图

<div>
  { movieDate.map(movie =>{
    <Card style={ cardStyle.cardMain }>
      <CardActionArea>{ movie .original_title }
      < CardMedia style = { cardStyle.cardImage } > { movie .original_image } < /CardMedia>
        < CardContent > { movie .original_date } < /CardContent>

        < /CardActionArea>
        < CardActions style = { cardStyle.cardButton } >
          <Button>Watch < /Button>
          < Button > Like < /Button>
          < Button > Rent < /Button>
          < /CardActions>
          < /Card>}
  })
        < /div>

【讨论】：

感谢一百万，@Rahul，它真的帮助我真正理解了 useState 的概念，何时何地使用它。

【解决方案3】：

const Produts = () => {
  const [movieData, setMovieData] = useState([]);
  const getMovieList = async () => {
    const url =
      "http://api.themoviedb.org/3/search/movie?api_key=myapikey&query=Avengers";

    const response = await fetch(url);
    try {
      const responseJson = await response.json();
      const data = responseJson.results;
      setMovieData(data);
    } catch (err) {
      console.error(err);
    }
  };

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

  return (
    <>
      {movieData.map((movie) => {
        return (
          <Card style={cardStyle.cardMain} key={movie.id}>
            <CardActionArea>
              {movie.original_title}
              <CardMedia style={cardStyle.cardImage}>CardMedia</CardMedia>
              <CardContent>cardContainer</CardContent>
            </CardActionArea>
            <CardActions style={cardStyle.cardButton}>
              <Button>Watch</Button>
              <Button>Like</Button>
              <Button>Rent</Button>
            </CardActions>
          </Card>
        );
      })}
    </>
  );
};

export default Produts;

【讨论】：