如何在页面刷新后保留React EdiText组件的编辑内容？

我来帮你搞定这个问题～ 你现在遇到的核心问题是：用useState存储的编辑内容只存在内存里，页面刷新后组件重新挂载，state就会重置回初始值。要实现持久化，我们可以用浏览器的localStorage来保存编辑后的内容，下面是具体的修改方案：

核心思路 #

• 初始化state时，优先从localStorage读取对应项目的已保存内容，没有的话再用project的初始值
• 每次保存编辑内容时，同时把值存入localStorage，并且用项目id作为唯一标识，避免不同项目的内容互相覆盖

修改后的完整代码 #

const Project = ({ project, onDelete}) => {
  // 初始化标题：优先取localStorage的存储值，没有则用project的初始标题
  const [titleValue, setTitleValue] = useState(() => {
    return localStorage.getItem(`project_${project.id}_title`) || project.title;
  });
  
  // 初始化描述：同理处理描述内容
  const [descValue, setDescValue] = useState(() => {
    return localStorage.getItem(`project_${project.id}_description`) || project.description;
  });

  // 保存标题的处理函数
  const handleSaveTitle = (val) => {
    console.log('Edited title ->', val);
    setTitleValue(val);
    // 存入localStorage，用项目id区分
    localStorage.setItem(`project_${project.id}_title`, val);
  };

  // 保存描述的处理函数
  const handleSaveDesc = (val) => {
    console.log('Edited description ->', val);
    setDescValue(val);
    localStorage.setItem(`project_${project.id}_description`, val);
  };

  return (
    <div>
      <div className="project-component">
        <EdiText 
          type="text" 
          className="project-title" 
          value={titleValue} 
          onSave={handleSaveTitle} 
          showButtonsOnHover 
          submitOnUnfocus 
          cancelOnUnfocus 
        />
        <br/>
        <EdiText 
          type="textarea" 
          className="project-description" 
          value={descValue} 
          onSave={handleSaveDesc} 
          showButtonsOnHover 
          submitOnUnfocus 
          cancelOnUnfocus 
        />
        <Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
        <FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
      </div>
    </div>
  )
}

额外说明 #

1. 为什么用项目id作为key？
   如果你有多个Project组件实例，每个项目的编辑内容需要独立存储，用project_${project.id}_title这种命名方式可以避免不同项目的内容互相覆盖。

2. 如果需要同步到后端？
   要是你希望编辑后的内容能永久保存（即使清除浏览器缓存也不会丢失），可以在handleSaveTitle和handleSaveDesc里同时调用后端的更新接口，把数据存到服务器上。下次组件初始化时，优先从后端接口获取最新值，再回写到localStorage，这样就能兼顾前端缓存和后端持久化。

3. 清除localStorage的场景
   当你删除项目时（onDelete函数里），可以顺便把对应项目的localStorage数据删掉，避免无效数据占用空间：

   const handleDelete = () => {
     onDelete(project.id);
     localStorage.removeItem(`project_${project.id}_title`);
     localStorage.removeItem(`project_${project.id}_description`);
   };
   

   然后把删除按钮的onClick改成onClick={handleDelete}就行。

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