React中无法将localStorage数据存入state对象数组的解决方案

安全阿岳

2026-9-1

React localStorage数据无法写入组件State问题修复

你的代码存在3个直接导致问题的错误：

Key名拼写不匹配：存储localStorage时用的key是data，读取时错写为dati，根本无法命中之前存储的内容
异步时序错误：sendGetRequest是异步请求方法，你调用后没有等待请求完成、数据写入localStorage，就立刻执行读取逻辑，此时localStorage里还没有存入接口返回的数据
未执行State更新操作：你只是把处理后的列表打印到了控制台，没有调用React的setState方法把处理好的数据写入组件状态，自然state里的data数组不会有内容

修正后完整代码

async sendGetRequest(){
  try {
    const res = await axios.get('https://nba-players.herokuapp.com/players-stats')
    // 统一key名存储本地缓存
    localStorage.setItem('data', JSON.stringify(res.data))
    // 接口返回后直接处理前10条数据
    const playerList = res.data.slice(0, 10).map(item => ({
      nome: item.name,
      team: item.team_name
    }))
    // 写入组件state
    this.setState({
      data: playerList
    })
  } catch (err) {
    console.log('请求异常:', err)
    // 请求失败兜底：读取本地已有缓存渲染
    const localCache = localStorage.getItem('data')
    if (localCache) {
      const cacheResult = JSON.parse(localCache)
      const playerList = cacheResult.slice(0, 10).map(item => ({
        nome: item.name,
        team: item.team_name
      }))
      this.setState({
        data: playerList
      })
    }
  }
}

componentDidMount(){
  this.sendGetRequest()
}