React中useState读取localStorage失效及useEffect工作机制咨询

项目需求 #

从JS文件的对象数组里随机展示名词，点击按钮可将该名词的isFavorite属性切换为true，并把整个数组存入localStorage持久化；另一个页面展示所有已收藏的名词，支持取消收藏（删除）操作。

现有页面情况 #

NewNouns页面（收藏功能已实现） #

该页面负责随机展示名词，点击按钮更新对应名词的收藏状态，并同步到localStorage，代码如下：

import arrayNounsData from '../../Datas/nouns'

const NewNouns = () => {
  // 随机初始化展示的名词
  const[word,setWord]=React.useState(arrayNounsData.sort(() => 0.5 - Math.random())[0])
  // 从localStorage读取数组，没有则用初始数据
  const[words,setWords]=React.useState(()=>JSON.parse(localStorage.getItem("nouns")) || arrayNounsData)
 
  // 切换当前展示名词的收藏状态
  function addToFavorite(){ 
    setWords(prevValue=>prevValue.map(wordData =>{
      return wordData.id === word.id ?
      {
        ...wordData,
        isFavorite: !wordData.isFavorite
      }
      : {...wordData  }})) 
  }
 
  // 当words变化时，同步到localStorage
  React.useEffect(()=>{
    localStorage.setItem("nouns", JSON.stringify(words))
  },[words])
  
  return ( 
    <>
        {/* 页面渲染内容 */}
    </>
  )
}

FavoriteWords页面（删除功能异常） #

该页面需要读取localStorage里的数组，筛选出已收藏的名词展示，并实现取消收藏功能。但添加useEffect后，useState无法读取localStorage的值，初始化为空数组；不使用useEffect时一切正常。相关代码如下：

const FavoriteWords = () => {
    // 错误：nouns是未定义变量，应该用字符串"nouns"
    const [words,setWords]=React.useState(() => JSON.parse(localStorage.getItem(nouns)) || []) 
    // 依赖words初始化，但words可能为空
    const [favoriteWords, setFavoriteWords]=React.useState(words.filter(word => word.isFavorite === true))

    const word=favoriteWords.map(word =>(
      <Word
        key={word.id}
        id={word.id}
        word={word.value}
        deleteFromFavorite={deleteFromFavorite}
      />
    ) )

    // 错误：setDeleteWords未定义，且未同步更新原数组
    function deleteFromFavorite(wordId){ 
      setFavoriteWords(prevValue=>prevValue.map(wordData =>{
        return wordData.id === wordId ?
        {
          ...wordData,
          isFavorite:false
        }
        : {...wordData  }}))
      setDeleteWords(prevValue=>prevValue.map(wordData =>{
        return wordData.id === wordId ?
        {
          ...wordData,
          isFavorite: false
        }
        : {...wordData  }}))
    }
   /* 错误：存储键名是"notes"，和NewNouns的"nouns"不一致
    React.useEffect(()=>{
      localStorage.setItem("notes" , JSON.stringify(words))
    }, [words])
   */

  return (
    <WordsContainer >
          {word}
    </WordsContainer>
  )
}
export default FavoriteWords

const Word = (props) => {
  return (
      <SelectedContainer >
          {props.word}
          <TrashIcon src={Trash} onClick={() => props.deleteFromFavorite(props.id)} />
      </SelectedContainer> 
  )
}

示例对象数组 #

export default [
    {"id":0,"value":"Diamond","translation":"Diamant","isFavorite":false,"appeard":false},
    {"id":1,"value":" Manager","translation":" Manager","isFavorite":false,"appeard":false},
    {"id":2,"value":" Area","translation":" Zona","isFavorite":false,"appeard":false}
]

问题原因分析 #

1. localStorage键名错误：localStorage.getItem(nouns)里的nouns是未定义变量，应该用字符串"nouns"，和NewNouns页面存储的键名一致。这直接导致初始读取失败，words被设为空数组。
2. 状态冗余与不同步：favoriteWords作为单独的state，依赖words初始化，但后续words更新时不会自动同步，导致展示数据和实际存储不一致。
3. useEffect的错误使用：注释的useEffect用了错误的键名"notes"，如果启用它，会把初始的空数组words存入"notes"，但更致命的是如果改成"nouns"，会直接覆盖localStorage里的有效数据，导致后续读取全为空。

修复方案 #

1. 修正localStorage键名 #

把localStorage.getItem(nouns)改为localStorage.getItem("nouns")，确保读取正确的存储键。

2. 优化状态管理，去掉冗余state #

favoriteWords是words的衍生数据，不需要单独维护state，用useMemo缓存筛选结果即可：

const favoriteWords = React.useMemo(() => words.filter(word => word.isFavorite === true), [words])

3. 修正删除函数逻辑 #

删除函数需要更新原数组words的状态，而不是单独修改favoriteWords，确保状态和localStorage同步：

function deleteFromFavorite(wordId){ 
  setWords(prevWords => prevWords.map(wordData =>{
    return wordData.id === wordId 
      ? {...wordData, isFavorite: false}
      : {...wordData}
  }))
}

4. 正确使用useEffect同步数据 #

添加useEffect监听words变化，同步到localStorage的"nouns"键：

React.useEffect(()=>{
  localStorage.setItem("nouns", JSON.stringify(words))
}, [words])

修复后的完整代码 #

const FavoriteWords = () => {
    // 正确读取localStorage的"nouns"键
    const [words,setWords]=React.useState(() => JSON.parse(localStorage.getItem("nouns")) || []) 
    // 用useMemo缓存已收藏名词，避免重复计算
    const favoriteWords = React.useMemo(() => words.filter(word => word.isFavorite === true), [words])

    const wordElements = favoriteWords.map(word =>(
      <Word
        key={word.id}
        id={word.id}
        word={word.value}
        deleteFromFavorite={deleteFromFavorite}
      />
    ) )

    // 更新原数组的收藏状态
    function deleteFromFavorite(wordId){ 
      setWords(prevWords => prevWords.map(wordData =>{
        return wordData.id === wordId 
          ? {...wordData, isFavorite: false}
          : {...wordData}
      }))
    }

    // 同步words到localStorage
    React.useEffect(()=>{
      localStorage.setItem("nouns", JSON.stringify(words))
    }, [words])

  return (
    <WordsContainer >
          {wordElements}
    </WordsContainer>
  )
}
export default FavoriteWords

const Word = (props) => {
  return (
      <SelectedContainer >
          {props.word}
          <TrashIcon src={Trash} onClick={() => props.deleteFromFavorite(props.id)} />
      </SelectedContainer> 
  )
}

useEffect工作机制说明 #

• useEffect会在组件挂载完成后、依赖项（这里是words）更新时执行。
• 在这个场景中，它的作用是把内存中的words状态同步到localStorage，确保页面刷新或跳转后数据不会丢失。
• 之前的错误是因为初始读取失败导致words为空，启用错误的useEffect会把空数组覆盖到localStorage，彻底清空之前的收藏数据。

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