问题描述
这是迄今为止我的代码。你能帮我弄清楚如何使用 get 功能将收藏夹发送到收藏夹页面。所以基本上我对获取 id 并将其传递到最喜欢的页面感到困惑。
import Head from "next/head";
import Uppernav from "../components/Uppernav";
import Lowernav from "../components/Lowernav";
import { Avatar } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ChatBubbleOutlineIcon from "@material-ui/icons/ChatBubbleOutline";
import ShareIcon from "@material-ui/icons/Share";
import SendIcon from "@material-ui/icons/Send";
import styled from "styled-components";
import { useRouter } from "next/router";
const Home = ({ info }) => {
const AddToFav = (e) => {
console.log(info);
};
return (
<div>
<Head>
<title>favapp</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Uppernav />
{info.map((infor) => (
<Container key={infor.id}>
<ContainerOne>
<UserAvatar src={infor.userimg} />
</ContainerOne>
<ContainerTwo>
<ContainerPara>
<ParaPart>
<LikedPart>
<p>{infor.username}</p>
</LikedPart>
<p>{infor.description}</p>
</ParaPart>
<IconContainer>
<Icon>
<ChatBubbleOutlineIcon />
</Icon>
<Icon>
<ShareIcon />
</Icon>
<Icon>
<FavoriteIcon onClick={() => AddToFav()} />
</Icon>
<Icon>
<SendIcon />
</Icon>
</IconContainer>
</ContainerPara>
</ContainerTwo>
</Container>
))}
<Lowernav />
</div>
);
};
export async function getStaticProps() {
const res = await fetch(`http://localhost:3000/api/info`);
const data = await res.json();
return {
props: {
info: data,},};
}
export default Home;
const Container = styled.div`
display: flex;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 10px;
border-bottom: 1px white solid;
background-color: black;
`;
const ContainerOne = styled.div`
justify-content: space-around;
margin-left: 10px;
margin-right: 20px;
margin-top: 10px;
`;
const ContainerTwo = styled.div`
justify-content: flex-start;
width: 275px;
margin-right: 30px;
margin-top: 0px;
`;
const LikedPart = styled.div`
padding-bottom: 0px;
p {
color: white;
font-weight: bold;
}
display: flex;
align-items: center;
`;
const ParaPart = styled.div`
p {
color: white;
}
`;
const ContainerPara = styled.div`
justify-content: space-around;
`;
const IconContainer = styled.div`
justify-content: space-around;
display: flex;
justify-content: space-between;
`;
const Icon = styled.div`
color: white;
`;
const UserAvatar = styled(Avatar)`
cursor: pointer;
flex-direction: column;
:hover {
opacity: 0.8;
}
`;
这是我的 index.js 文件。想知道当你点击 onclick 按钮时它是如何工作的。
这是我的json文件
export default (req,res) => {
res.json([
{
id: 1,userimg:
"https://pbs.twimg.com/media/Eycz_95VoAA_rto?format=jpg&name=900x900",username: "NewsCurry @NewsCurrySL 12m",description:
"Public Told To Ignore Increasing Number Of Incidents Affecting The Country And Focus On How Beautiful Colombo Is. #lka #NewsCurry ",{
id: 2,userimg:
"https://pbs.twimg.com/profile_images/902529867110952961/TWQ0wJZ9_400x400.jpg",username: "Tea pain @teapain 30m",description:
"Not a fair comparison. Hitler actually served in his military.",{
id: 3,userimg:
"https://pbs.twimg.com/profile_images/1326165874013851649/A5YG4b9C_400x400.jpg",username: "Tomorrowland @tomor... 45m",description:
"Down Memory Lane,2013. A new chapter in The Book of Wisdom: TomorrowWorld. A breathtaking experience deep within the forests of Chattahoochee Hills (Atlanta USA).",{
id: 4,userimg:
"https://pbs.twimg.com/profile_images/1150723196582129665/hr84nTjZ_400x400.jpg",username: "Jay R. Wilson @JayRWil... 2h ",description:
"Today's #music #guitar segment on the @JRWtalks #podcast https://jrwtalks.podbean.com/e/the-unkNown-can-be-great/",{
id: 5,userimg:
"https://pbs.twimg.com/profile_images/1136342156778409984/LSuPUSlO_400x400.jpg",username: "Aakashavaani @TheAakashavaani 3h ",description:
"#VakeelSaab already the highest grossing Indian film from premieres post Covid break in USA Flag of United States. Terrific start!!",{
id: 6,userimg:
"https://pbs.twimg.com/profile_images/1378341827447812098/6yTrbJNU_400x400.jpg",username: "Demi lovato Team ? @DemiTeamTR 3h",description:
"lovATICS WE AIN’T PLAYING NO MORE. WE WILL GET THE #1 SPOT BOTH IN USA & UK. LET’S GO BUY & STREAM ALL DAY TODAY!! Fire",]);
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)