如何通过ReactJS在localStroge上添加项目

Question

我不明白如何使用react js中的句柄更改方法在localStroge上添加项目。

问题是我想添加一个收藏夹列表。当我单击收藏夹列表中的所有复选框时，我需要控制它们。

我想将填充的项目存储在我的本地存储中。 handlechange功能填充所有喜爱的图标为什么？

每次点击都会填充一个项目。是否可以使用 Material UI 或 Martial UI 复选框图标？我该如何处理？

这是我的 UI 视图

function Main() {

  //   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

问题是您使用的是布尔值，并且无法识别特定项目。

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

  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 />}
                />

Answer 2

我使用includes()数组方法解决了这个问题。 Material-ui 复选框采用布尔值。

我使用 redux hook 来使用Seclacctor。谢谢你。