如何在 React JS 中的页面刷新时选中持久复选框？

Question

我正在尝试在页面刷新后显示复选框（已由用户选中）。我能够将所选行的数据保存在本地存储中（选中时）并在取消选中时删除数据，但是当我刷新页面复选框时显示为未选中（即使本地存储中存储了数据）。

我的代码是

import React, { useState, useEffect } from "react";

const data = [
  {
    id: "1",
    name: "Jane",
    lastName: "Doe",
    age: "25"
  },
  {
    id: "2",
    name: "James",
    lastName: "Doe",
    age: "40"
  },
  {
    id: "3",
    name: "Alexa",
    lastName: "Doe",
    age: "27"
  },
  {
    id: "4",
    name: "Jane",
    lastName: "Brown",
    age: "40"
  }
];

export default function App() {
  const [peopleInfo] = useState(
    data.map((d) => {
      return {
        select: false,
        id: d.id,
        name: d.name,
        lastName: d.lastName,
        age: d.age
      };
    })
  );

  const [peopleInfoValue, setPeopleInfoValue] = useState(
    localStorage.getItem("selectedPeople") == null
      ? ""
      : JSON.parse(localStorage.getItem("selectedPeople"))
  );

  useEffect(() => {
    localStorage.setItem("selectedPeople", JSON.stringify(peopleInfoValue));
  }, [peopleInfoValue]);

  return (
    <div className="App">
      <table>
        <tr>
          {peopleInfo?.map((d) => {
            return (
              <div
                key={d.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  style={{ margin: "20px" }}
                  onChange={(e) => {
                    // add to list
                    let checked = e.target.checked;
                    if (checked) {
                      setPeopleInfoValue([
                        ...peopleInfoValue,
                        {
                          select: true,
                          id: d.id,
                          name: d.name,
                          lastName: d.lastName,
                          age: d.age
                        }
                      ]);
                    } else {
                      // to remove from localstorage
                      setPeopleInfoValue(
                        peopleInfoValue.filter((people) => people.id !== d.id)
                      );
                    }
                  }}
                  // checked={d.select}
                  type="checkbox"
                />
                <td style={{ margin: "20px" }}>{d.name}</td>
                <td style={{ margin: "20px" }}>{d.lastName}</td>
                <td style={{ margin: "20px" }}>{d.age}</td>
              </div>
            );
          })}
        </tr>
      </table>
    </div>
  );
}

和codeSandbox

截至目前，勾选本地存储看起来像这样

当我尝试像这样将 d.select 传递给检查时 checked={d.select} （所以当 d.select 为 === true 框时将被选中）它会保存在 localStorage作为 select:true 但在刷新时不显示选中。我不知道如何在页面刷新后保持选中框仍然处于选中状态。非常感谢任何帮助和建议。

Answer 1

您的想法是正确的，但您的代码中存在错误。

您的主要问题是，当您渲染组件时，您正在映射peopleInfo 的值，当您加载人们以查看在页面刷新之前检查了哪些值时，您将它们加载到peopleInfoValue，在渲染组件时，您从未真正参考过它。当您正确设置本地存储时，本地存储中的值永远不会显示。

使用@Chris G 的版本，它可以满足您的需求，而且非常好。很高兴了解为什么您的原始代码不起作用。

Answer 2

我发现这里有很多问题。

首先：您必须在初始化状态时检查本地存储中是否有内容。

第二：每个单选或复选框输入都必须在属性“checked”中进行条件检查：
<input name="IamCheckbox" type="checkbox" checked={user.select} />

第三：有很多表格来初始化这些数据。您可以创建一个新的 var 传递给 useState 或使用 useEffect 来检查并更新状态。如果我这样做，我会尽可能清楚地说明问题。因为也许你在初始化状态时必须格式化数据。

Answer 3

问题

下面的列表显示了您的复选框在页面刷新时没有更新的原因。

• 复选框状态（已选中）仅由 onChange 事件处理（状态仅在 UI 更改输入值时更新）
• useEffect 仅处理设置 localStorage 值

解决方案

在 useEffect 中包含一个方法来执行以下操作：

• 获取本地存储值
• 将其设置为状态“peopleInfoValue”