Reactjs 如何根据用户在react.js中的 Select ， Select 多个心形图标

当涉及到判断状态时，您应该只需要关心项的索引.

<EachHeart
  checked={heartsClicked[index]}
  onClick={handleClick}
  index={index}
/>

const handleClick = (index) => {
  setHeartsClicked((existing) => {
    const copy = [...existing];
    copy[index] = !copy[index];
    return copy;
  });
};

此外，这些状态毫无意义:

const [isLike, setIsLike] = useState(false);
const [heartIndexClicked, setHeartIndexClicked] = useState();

工作示例

try 以下操作:

我把first10改成了visibleData.这是一个比昨天我already suggested更好的名字.我还将大小从10改为15.您应该使用变量，而不是硬编码幻数.

import { useCallback, useMemo, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { TbHeart } from "react-icons/tb";
import { arr } from "./utils";

export function EachHeart({ checked, index, onClick }) {
  return (
    <>
      <TbHeart
        key={index}
        onClick={() => onClick(index)}
        className={` mt-9 ${
          checked &&
          "fill-green-500 transition-colors ease-in delay-150 hover:scale-[1.20]"
        } stroke-green-500 ml-5 w-5 h-5 cursor-pointer`}
      />
    </>
  );
}

const pageSize = 15;

export default function App() {
  const [visibleData, setVisibleData] = useState(arr.slice(0, pageSize));
  const [page, setPage] = useState(1);
  const [heartsClicked, setHeartsClicked] = useState([]);

  const fetchMoreData = useCallback(() => {
    setTimeout(() => {
      setVisibleData((prev) => [
        ...prev,
        ...arr.slice(page * pageSize, page * pageSize + pageSize),
      ]);
      setPage((prev) => (prev += 1));
    }, 2000);
  }, []);

  const handleClick = useCallback((index) => {
    setHeartsClicked((existing) => {
      const copy = [...existing];
      copy[index] = !copy[index]; // Invert true/false
      return copy;
    });
  }, []);

  const isDone = useMemo(() => visibleData.length < arr.length, [visibleData]);

  return (
    <>
      <div className="mt-24"></div>
      <InfiniteScroll
        dataLength={visibleData.length}
        next={fetchMoreData}
        hasMore={isDone}
        loader={<h3 className="font-bold text-center text-xl">Loading...</h3>}
        endMessage={
          <p className="text-base my-4 font-medium text-center">
            <b>Yay! You have seen it all</b>
          </p>
        }
      >
        {visibleData.map((t, index) => {
          return (
            <>
              <div className="flex ">
                <li key={index} className="mx-4 mt-8">
                  {t.name.concat(` ${t.id}`)}
                </li>
                <EachHeart
                  checked={heartsClicked[index]}
                  onClick={handleClick}
                  index={index}
                />
              </div>
            </>
          );
        })}
      </InfiniteScroll>
    </>
  );
}