ReactJS本地存储问题：刷新后无法读取数据如何修复？

嘿，我来帮你搞定这个问题！刷新后数据还在localStorage但页面不显示，核心原因是你没有在组件初始化的时候从localStorage读取数据到state里，另外你的编辑、删除函数也有一些小问题，我一步步给你讲怎么修：

1. 先解决初始化加载数据的问题 #

组件启动的时候，要先去localStorage里找有没有保存的食谱数据，有的话就把它作为初始state，没有的话就用空数组。在你的类组件的constructor里加上这段代码：

constructor(props) {
  super(props);
  // 从localStorage读取保存的食谱
  const savedRecipes = localStorage.getItem("recipe");
  // 有数据就解析成数组，没有就用空数组
  const initialRecipes = savedRecipes ? JSON.parse(savedRecipes) : [];
  this.state = {
    recipe: initialRecipes
  };
}

这样刷新页面的时候，组件就会自动把localStorage里的数据加载到state里了。

2. 修复编辑食谱的函数 #

你现在的editRecipe直接修改了state里的原对象，这违反了React的不可变状态原则，会导致React无法正确检测到状态变化，而且setState的写法也不对。改成下面这样：

editRecipe = (updatedRecipe) => {
  this.setState(prevState => {
    // 用map创建新数组，找到对应count的食谱替换成更新后的对象
    const newRecipes = prevState.recipe.map(recipe => 
      recipe.count === updatedRecipe.count ? updatedRecipe : recipe
    );
    return { recipe: newRecipes };
  }, this.saveToLocal);
}

这里用了函数式的setState，依赖之前的状态来创建新数组，既保证了状态的不可变性，也能正确触发组件更新。

3. 修复删除食谱的函数 #

你现在的deleteRecipe只过滤了数组，但没有把新数组设置回state，也没调用saveToLocal，所以删除后状态没更新，localStorage也没同步。改成这样：

deleteRecipe = (recipe) => {
  this.setState(prevState => {
    const newRecipes = prevState.recipe.filter(obj => obj.count !== recipe.count);
    return { recipe: newRecipes };
  }, this.saveToLocal);
}

这样删除后，状态会更新，同时调用saveToLocal把新数据保存到localStorage里。

最后再确认一下saveToLocal函数 #

你的saveToLocal写法是对的，再确认一下：

saveToLocal = () => {
  localStorage.setItem("recipe", JSON.stringify(this.state.recipe));
}

这样修改之后，刷新页面应该就能正常加载之前保存的食谱数据了，新增、编辑、删除的操作也能正确同步到localStorage里~

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