React中localStorage.setItem正常但getItem失效，页面刷新数据丢失

你的代码存在时序逻辑问题：组件初始化时，useState先把recipes设为sampleRecipe，紧接着第二个依赖recipes的useEffect会立即执行，将sampleRecipe存入localStorage，直接覆盖了用户之前修改保存的数据。等第一个useEffect去读取localStorage时，拿到的已经是被覆盖的初始数据，所以刷新后修改内容全部丢失。

把recipes的初始值改成优先读取localStorage数据，取不到再用sampleRecipe，同时移除第一个读取localStorage的useEffect，避免重复操作：

const LOCAL_STORAGE_KEY = "cookingWithKyle.recipes"

function App() {
  const [selectedRecipeId, setSelectedRecipeId] = useState()
  // 组件首次挂载时仅执行一次：优先从localStorage取数据，无数据则用sampleRecipe
  const [recipes, setRecipes] = useState(() => {
    const recipeJSON = localStorage.getItem(LOCAL_STORAGE_KEY)
    return recipeJSON ? JSON.parse(recipeJSON) : sampleRecipe
  })
  const selectedRecipe = recipes.find(
    (recipe) => recipe.id === selectedRecipeId
  )

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(recipes))
  }, [recipes])
}

使用useState的函数式初始化，是因为这个读取逻辑只需要在组件首次挂载时执行一次，避免每次渲染都重复读取localStorage。修改后，组件初始化时会优先加载用户之前保存的数据，后续修改也会正常同步到localStorage，刷新后不会丢失内容。

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