如何在react js中使用Map函数与Api使用钩子，如useEffect和useState &g

Question

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

我试图使用API使用Await Async和显示数据在我的卡。我可以在控制台日志中看到结果，但在卡中看不到。

我想，据我所知，我必须使用map函数映射数据与我的卡看到所有的数据。如有错误，请指正。

如果你能让我知道下一步需要做什么看看我的代码和如何将是伟大的。

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

首先你是使用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>   

Answer 2

try this:

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