React组件无法渲染LocalStorage列表，页面空白求助

1. 解决LocalStorage解析崩溃（页面空白核心原因） #

LocalStorage中若存在非JSON格式的数据，JSON.parse会抛出错误直接导致组件崩溃，页面空白。给解析逻辑添加异常捕获：

修改List组件的useEffect部分：

useEffect(() => {
  const keys = Object.keys(localStorage);
  const newList = [];
  keys.forEach(key => {
    try {
      const item = localStorage.getItem(key);
      const parsed = JSON.parse(item);
      // 确保解析后的数据包含必要字段
      if (parsed.key && parsed.expense && parsed.price && parsed.category) {
        newList.push(parsed);
      }
    } catch (err) {
      console.warn(`解析key为${key}的数据失败:`, err);
      // 可选：自动清理无效数据
      // localStorage.removeItem(key);
    }
  });
  setList(newList);
}, []);

2. 修复删除逻辑的闭包问题 #

deleteHandler中直接使用当前list状态，会因闭包导致删除后状态更新不及时，改用函数式更新：

修改List组件的deleteHandler：

const deleteHandler = (key) => {
  localStorage.removeItem(key);
  // 使用函数式更新，确保拿到最新状态
  setList(prevList => prevList.filter(element => element.key !== key));
};

3. 实现表单提交后列表自动刷新 #

当前List组件仅在挂载时读取LocalStorage，表单提交后不会自动更新。通过props传递刷新触发信号实现同步：

步骤1：修改Form组件，添加刷新触发状态 #

const Form = () => {
  // 新增状态，用来触发List重新加载数据
  const [refreshList, setRefreshList] = useState(0);
  
  const submitHandler = (event) => {
    event.preventDefault();
    if (key !== "" && expense !== "" && price !== 0 && category !== "") {
      const data = { key, expense, price, category };
      localStorage.setItem(key, JSON.stringify(data));
      // 提交后更新触发信号
      setRefreshList(prev => prev + 1);
      // 清空表单
      setKey("");
      setExpense("");
      setPrice(0);
      setCategory("");
    } else {
      alert("fill the details first");
    }
  };
  
  return (
    <div>
      {/* 表单部分保持不变 */}
      <form onSubmit={submitHandler}>...</form>
      {/* 传递刷新触发信号给List */}
      <List refreshTrigger={refreshList} />
    </div>
  );
};

步骤2：修改List组件，监听刷新信号 #

const List = ({ refreshTrigger }) => {
  const [list, setList] = useState([]);

  // 把refreshTrigger加入依赖数组，信号变化时重新加载数据
  useEffect(() => {
    const keys = Object.keys(localStorage);
    const newList = [];
    keys.forEach(key => {
      try {
        const item = localStorage.getItem(key);
        const parsed = JSON.parse(item);
        if (parsed.key && parsed.expense && parsed.price && parsed.category) {
          newList.push(parsed);
        }
      } catch (err) {
        console.warn(`解析key为${key}的数据失败:`, err);
      }
    });
    setList(newList);
  }, [refreshTrigger]);

  // deleteHandler保持修改后的逻辑
  const deleteHandler = (key) => {
    localStorage.removeItem(key);
    setList(prevList => prevList.filter(element => element.key !== key));
  };

  return (
    <div>
      <ul>
        {list.length === 0 ? (
          <li>暂无数据，请添加支出</li>
        ) : (
          list.map((element) => (
            <li key={element.key}>
              Key: {element.key}, Expense: {element.expense}, Price:{" "}
              {element.price}, Category: {element.category}
              <button onClick={() => deleteHandler(element.key)}>Delete💥</button>
            </li>
          ))
        )}
      </ul>
    </div>
  );
};

4. 修复Price类型不一致问题 #

表单中Price的onChange会把字符串赋值给number类型状态，存到LocalStorage后会变成字符串，读取后显示异常。修改Form组件的Price输入逻辑：

<Input
  type="number"
  label="Price"
  value={price}
  onChange={(event) => setPrice(Number(event.target.value) || 0)}
/>

额外排查点 #

• 检查List组件的导入路径是否与实际文件位置匹配，路径错误会导致组件加载失败，页面空白。
• 打开浏览器控制台（F12）查看报错信息，这是排查React组件崩溃最直接的方式。

内容的提问来源于stack exchange，提问作者q j