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

我来帮你搞定这个问题～你现在遇到的情况是因为只通过useState保存了编辑后的内容，而useState的状态只存在于组件的内存中，页面刷新后组件重新挂载，状态就会回到初始值。要解决这个问题，我们需要把编辑后的内容持久化存储，比如用浏览器的localStorage，这样即使刷新页面，内容也能保留。

下面是修改后的代码，我会一步步说明改动点：

const Project = ({ project, onDelete}) => { 
  // 初始化时优先从localStorage读取对应项目的内容，没有则用project的初始值
  const [title, setTitle] = useState(
    localStorage.getItem(`project_${project.id}_title`) || project.title
  );
  const [description, setDescription] = useState(
    localStorage.getItem(`project_${project.id}_description`) || project.description
  );

  // 单独处理标题的保存，同步更新state和localStorage
  const handleTitleSave = (val) => { 
    setTitle(val);
    localStorage.setItem(`project_${project.id}_title`, val);
  };

  // 单独处理描述的保存，同步更新state和localStorage
  const handleDescriptionSave = (val) => { 
    setDescription(val);
    localStorage.setItem(`project_${project.id}_description`, val);
  };

  return ( 
    <div> 
      <div className="project-component"> 
        <EdiText 
          type="text" 
          className="project-title" 
          value={title}  {/* 用本地维护的title状态 */}
          onSave={handleTitleSave}  {/* 绑定标题专属的保存函数 */}
          showButtonsOnHover 
          submitOnUnfocus 
          cancelOnUnfocus 
        /> 
        <br/> 
        <EdiText 
          type="textarea" 
          className="project-description" 
          value={description}  {/* 用本地维护的description状态 */}
          onSave={handleDescriptionSave}  {/* 绑定描述专属的保存函数 */}
          showButtonsOnHover 
          submitOnUnfocus 
          cancelOnUnfocus 
        /> 
        <Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link> 
        <FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/> 
      </div> 
    </div> 
  ) 
}

关键改动说明： #

• 状态初始化：不再用空字符串，而是从localStorage读取对应项目的已保存内容。用project.id作为localStorage键的一部分，确保不同项目的内容不会互相覆盖。
• 拆分保存函数：因为有两个不同的编辑区域（标题和描述），所以分别写了handleTitleSave和handleDescriptionSave，保存时同时更新组件状态和localStorage。
• 绑定对应状态：每个EdiText的value绑定到本地维护的title/description状态，而不是直接用project.title，这样编辑后的内容能实时反映到组件上。

如果之后你的项目有后端服务，还可以在保存函数里调用接口，把内容同步到数据库，这样即使清除浏览器缓存，数据也不会丢失。现在这个方案能快速解决页面刷新后内容丢失的问题～

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