关于在 Next.js 中使用 GET,DELETE

如何解决关于在 Next.js 中使用 GET,DELETE

这是迄今为止我的代码。你能帮我弄清楚如何使用 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",]);
};

关于在 Next.js 中使用 GET,DELETE

如何解决关于在 Next.js 中使用 GET,DELETE

相关推荐