React集成Fortune-Sheets：页面刷新时表格数据更新异常问题求助

问题现象 #

使用fortune-sheets React组件时，输入数据后刷新页面，控制台日志显示workbookData先恢复为本地存储的'test'数据，随后又变回null，无法持久渲染已保存的数据。

原因分析 #

1. 初始状态workbookData设为null，组件首次渲染时，Workbook使用硬编码的固定data值，触发onChange将workbookData设为初始的null（对应前两次日志）。
2. 页面刷新后，useEffect从localStorage读取数据并设置workbookData为保存的值（第三次日志）。
3. 但Workbook组件的data未与workbookData状态绑定，组件仍基于初始data运行，内部逻辑再次触发onChange，将workbookData重置为null（第四次日志）。

解决方案 #

修改点说明 #

• 初始化状态时直接从localStorage读取数据，避免初始null导致的不必要状态更新。
• 将Workbook的data属性动态绑定到workbookData状态，确保组件渲染与状态同步。
• 优化onChange逻辑，仅当数据真正变化时更新状态和存储，减少冗余操作。

修改后的代码 #

import { Workbook } from "@fortune-sheet/react";
import { useState } from "react";

const Sheet = () => {
  // 初始化时优先从localStorage读取数据，无数据则用默认值
  const [workbookData, setWorkbookData] = useState(() => {
    const savedData = localStorage.getItem('workbookData');
    return savedData ? JSON.parse(savedData) : [{ name: 'Sheet1', celldata: [{ r: 0, c: 0, v: null }] }];
  });

  const handleChange = (data) => {
    // 对比数据，避免重复更新
    if (JSON.stringify(data) !== JSON.stringify(workbookData)) {
      setWorkbookData(data);
      localStorage.setItem('workbookData', JSON.stringify(data));
    }
  };

  return (
    <div className="containerSheet">
      <Workbook 
        data={workbookData}
        onChange={handleChange}
        // 保留其他设置项
      />
    </div>
  );
};

export default Sheet;

效果验证 #

修改后刷新页面，workbookData会直接初始化为本地存储的数据，Workbook组件基于该数据渲染，后续的onChange只会在用户修改数据时触发，不会出现数据被重置为null的情况。

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