Блог

Я действительно потерялся с Nextjs. Кажется, я понял, что мне нужно использовать ксв, но я не уверен, что это сработает в моем случае. или даже как заставить его работать.

У меня есть продукты, которые имеют один и тот же компонент на нескольких страницах моего сайта. В этом компоненте у меня есть кнопка «Избранное», которая должна быть активирована на всех этих страницах. по щелчку мыши он должен опубликовать или УДАЛИТЬ сообщение с помощью токена и идентификатора продукта.

На данный момент мой компонент выглядит так, и, конечно, postFavorites и deleteFavoris не работают:

 import React, { useEffect, useState } from "react" import Link from 'next/link' import Styles from "./card.module.scss" import axios from 'axios'  export default function Card(props) {  const [favoris, setFavoris] = useState(false);   const deleteFavoris = async () =gt; {  console.log("click");  try {  const res = await axios({  method: 'POST',  url: `${process.env.NEXT_PUBLIC_BASE_API}/favorites`,  headers: {  Authorization: "Bearer "   session.token,  },  body: {  advert: props["@id"]  }  });  } catch (error) {  if (error.response) {  throw new Error(await error.response.data.message)  }  }  }   const postFavoris = async () =gt; {  console.log("click");  try {  const res = await axios({  method: 'DELETE',  url: `${process.env.NEXT_PUBLIC_BASE_API}/favorites`,  headers: {  Authorization: "Bearer "   session.token,  },  body: {  advert: props["@id"]  }  });  } catch (error) {  if (error.response) {  throw new Error(await error.response.data.message)  }  }  }     const handleClick = () =gt; {  if (favoris === true) {  deleteFavoris()  } else {  postFavoris()  }  setFavoris(!favoris)  }    return (  lt;div className={Styles.card}gt;  lt;Link href={"/annonce?id=" props.id} passHrefgt;  lt;a className={Styles.imageCard} style={{backgroundImage: `url(${props.imageSrc})`}}gt;  lt;p className={Styles.localisationCard}gt;lt;span className="material-icons"gt;location_onlt;/spangt;{props.localisation}lt;/pgt;  lt;/agt;  lt;/Linkgt;  lt;div className={Styles.favCard   " "   ((favoris === true) amp;amp; Styles.active)} onClick={() =gt; handleClick()}gt;lt;/divgt;  lt;p className={Styles.titleCard}gt;{props.title}lt;/pgt;  lt;p className={Styles.pricesCard}gt;lt;span className="material-icons-outlined"gt;local_offerlt;/spangt;Prix : {props.prices}lt;/pgt;  lt;p className={Styles.eligibilitesCard}gt;lt;span className="material-icons-outlined"gt;check_circlelt;/spangt;Eligibilité ({props.eligibilities})lt;/pgt;  lt;/divgt;  ) }