واکنش نشان دهید: خطرات پنهان استفاده از شاخص به عنوان یک کلید

// src/app/page.tsx

import CategoryContainer from "@/components/home-container";
import "../styles/global.css";

export default async function Home() {
  const response = await fetch("https://dummyjson.com/products/category-list");
  const data: string[] = await response.json();
  return (
    <>
      
    >
  );
}

// CategoryContainer.tsx

"use client";

import Image from "next/image";
import React, { FC, useEffect, useState } from "react";
import ProductResponse from "./from-type-folder-lets-assume";

type Props = {
  data: string[];
};


const CategoryContainer: FC = ({ data }) => {
  const [selectedCategory, setSelectedCategory] = useState("");
  const [productDetails, setProductDetails] = useState(
    null
  );

  useEffect(() => {
    (async () => {
      const response = await fetch(
        "https://dummyjson.com/products/category/" + selectedCategory
      );
      const data: ProductResponse = await response.json();
      setProductDetails(data);
    })();
  }, [selectedCategory]);

  return (
    

      {data?.map((item, index) => {
        return (
           setSelectedCategory(item)}
            className={`text-gray-900 border border-gray-300 font-medium rounded-full text-sm px-5 py-2.5 me-2 mb-2 uppercase ${
              item === selectedCategory ? "bg-gray-600 text-white" : "bg-white"
            }`}
          >
            {item}
          
        );
      })}
      

      

        {productDetails?.products?.map((product, index) => {
          return (
            

              

                
{product.title}
                
{product.description}
                
              
            
          );
        })}
      
    
  );
};

export default CategoryContainer;