如何使用像 useEffect 和 useState 这样的 Hooks 在 Api 的 React js 中使用 Map 函数

Question

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

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

据我所知，我必须使用地图功能将数据映射到我的卡上才能看到所有数据。如有不妥请指正

另外，如果你能让我知道接下来需要做什么，看看我的代码，那会怎么样。

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;

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

Answer 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>
      ))
    </>
  );
};

Answer 2

首先你使用的 useState 是错误的尝试这种方式 setMovieData(responseJson.results) 然后将它用于 map

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

Answer 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;

如何使用像 useEffect 和 useState 这样的 Hooks 在 Api 的 React js 中使用 Map 函数

How to use Map function in react js with Api using Hooks like useEffect and useState

javascript

arrays

api

reactjs

mern