Question

I m New at React and Next, I have this Code:

import Link from  next/link ;
import Image from  next/image ;


async function getPalpedia() {
  const response = await fetch(`http://localhost:3000/api/palpedia`, {
    method: "GET",
  })
  return response.json();
}

export default async function palpedia() {
  const palpediaJSON = await getPalpedia();
  const palpedia = JSON.stringify(palpediaJSON)

  return (
    <div>
      <div className="fixed z-20 top-[4rem] bottom-0 right-[max(0px,calc(50%-58rem))] w-[15.5rem] py-10 overflow-y-auto hidden xl:block">
        {palpediaJSON.map((pal) => (
          <div className="palInfo" key={pal.id}>
            <Link href="#" >{pal.name}</Link>
            <p>Types: {pal.types.join(", ")}</p>
            <p>HP: {pal.hp}</p>
            <p>ATK: {pal.atk}</p>
            <p>DEF: {pal.def}</p>
          </div>
        ))}
      </div>
      <div className="overlay">
      <Image id="chikipi" src="/chikipi.png" width={0} height={0} alt="Chikipi" />
      </div>
    </div>
  );
}

This is a page in which I m trying to show a list called Palpedia, and when clicking a Link element, I would like the image to appear, of course I ll add a lot of images but first I m trying with this one. Also feel free to tell everything that is wrong/bad practice, as I made this without much knowledge.

谢谢!

I ve already tried by adding a "useState hook", but it seems this page belongs to the server side and I can only use that hook on the client side, so I do not know if I can apply that solution. I ve also tried to use the "use client" in the first line, same result.

Answer 1

在这方面,你需要使用客户部分。

<代码>用户”;在代码上。使用国家和使用效果。

这里是最后法典

"use client";

import { useEffect, useState } from "react";

import Link from  next/link ;
import Image from  next/image ;


async function getPalpedia() {
  const response = await fetch(`http://localhost:3000/api/palpedia`, {
    method: "GET",
  })
  return response.json();
}

export default function palpedia() {

  const [palpedia, setPalpedia] = useState(null);
  const [image, setImage] = useState(null);

  const handleClick = (imageUrl) => {
    if (imageUrl === image) {
      setImage(null);
    } else {
      setImage(imageUrl)
    }
  }
  
  useEffect(() => {
    async function fetchData() {
      const palpediaJSON = await getPalpedia();

      setPalpedia(palpediaJSON);
    }
    fetchData();
  }, []);

  return (
    <div>
      <div className="fixed z-20 top-[4rem] bottom-0 right-[max(0px,calc(50%-58rem))] w-[15.5rem] py-10 overflow-y-auto hidden xl:block">
        {palpedia.map((pal) => (
          <div className="palInfo" key={pal.id}>
            <Link href="#" onClick={() => handleClick(pal.image)}>{pal.name}</Link>
            <p>Types: {pal.types.join(", ")}</p>
            <p>HP: {pal.hp}</p>
            <p>ATK: {pal.atk}</p>
            <p>DEF: {pal.def}</p>
          </div>
        ))}
      </div>
      <div className="overlay">
      {image && (
        <Image id="chikipi" src={image} width={100} height={100} alt="Chikipi" />
      )}
      </div>
    </div>
  );
}

友情链接