我如何控制 React JS 中的每一个项目

Question

问题是我想添加一个收藏列表。 当我单击最喜欢的列表时，我需要控制所有复选框填充。

我想将填充的项目存储在我的本地存储中。 handleChange function 充满爱为什么？

每次点击都将是单项填充。 它是possibel mui 图标吗？

怎么处理？？？

我使用mui库

import { useGetAllProductsQuery } from "../features/productsApi";
import { useDispatch } from "react-redux";
import { addToCart } from "../features/cartSlice";
import { Link } from "react-router-dom";

// mui icon
import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
import Favorite from "@mui/icons-material/Favorite";
import Checkbox from "@mui/material/Checkbox";

function Main() {
  const { data, error, isLoading } = useGetAllProductsQuery();
  const dispatch = useDispatch();

  const handelAddTocard = (product) => {
    dispatch(addToCart(product));
  };

  //   Here is my state define
  const [checked, setChecked] = React.useState(
    localStorage.getItem("love") === "true"
  );

  const handleChange = (e) => {
    localStorage.setItem("love", `${e.target.checked}`);
    setChecked(e.target.checked);
    console.log(e.target.checked);
  };

  return (
    <>
      <div className="row mt-5">
        {isLoading ? (
          <>
            {Array.from({ length }).map((_, i) => (
              <MainLoading key={i} />
            ))}
          </>
        ) : error ? (
          <p>Error occured</p>
        ) : (
          <>
            {data?.map((product) => (
              <div className="col-md-3 mb-5 text-center" key={product.id}>
                <img
                  className="w-100"
                  style={{ height: "200px", objectFit: "contain" }}
                  src={product.image}
                  alt=""
                />
                <div>{product.title.substring(0, 20)}</div>
                <button
                  onClick={() => handelAddTocard(product)}
                  className="mt-3"
                >
                  Add to card
                </button>
                <button>
                  <Link
                    to={`/details/${product.id}`}
                    className="mt-3 text-decoration-none text-black"
                  >
                    view details
                  </Link>
                </button>

                {/* How can i control evey single item  */}
                <Checkbox
                  checked={checked}
                  onChange={handleChange}
                  icon={<FavoriteBorder />}
                  checkedIcon={<Favorite />}
                />
              </div>
            ))}
          </>
        )}
      </div>
    </>
  );
}

export default Main;

Answer 1

问题是您使用的是 boolean 并且您无法识别特定项目。

如果你想收藏多个项目，我会使用这样的东西：

  const [checked, setChecked] = React.useState(
    JSON.parse(localStorage.getItem("loveIds") || "[]")
  );

  const handleCheck = (id, productChecked) => {
    const newItems = productChecked ? [...checked, id] : checked.filter(x => x !== id);
    localStorage.setItem("loveIds", JSON.stringify(newItemS));
    setChecked(newItems);
    console.log(newItems);
  };

   // ...
    <Checkbox
                  checked={checked}
                  onChange={(e) => handleCheck(product.id, e.target.checked)}
                  icon={<FavoriteBorder />}
                  checkedIcon={<Favorite />}
                />