仅满足条件时执行componentDidMount() React刷新读取本地存储数据求助

核心问题 #

你的代码核心问题是组件挂载时没有优先读取localStorage缓存，直接触发了API请求，同时存在语法错误。

存在的问题 #

• 语法错误：constructor函数结束前多写了一个多余的右括号)，会导致编译报错
• 缺少缓存读取逻辑：componentDidMount生命周期直接发起fetch请求，没有先判断localStorage中是否已存在缓存数据
• 冗余逻辑：componentDidUpdate中重复实现localStorage存储逻辑，和fetch成功后的存储操作重复

修复后的完整代码 #

import React from "react"

class LogicContainer extends React.Component {
  constructor() {
    super()
    // 初始化优先读取localStorage缓存
    const cachedFacts = localStorage.getItem("allFacts")
    const parsedFacts = cachedFacts ? JSON.parse(cachedFacts) : []
    this.state = {
      isLoading: parsedFacts.length === 0, // 已有缓存则不需要走加载状态
      allFacts: parsedFacts
    }
  }

  componentDidMount() {
    // 只有无缓存时才调用API拉取新数据
    if (this.state.allFacts.length === 0) {
      fetch("https://catfact.ninja/facts?limit=1000")
        .then(response => response.json())
        .then(response => {
          const allFactsApi = response.data
          this.setState({ 
            isLoading: false,
            allFacts: allFactsApi
          })
          localStorage.setItem("allFacts", JSON.stringify(allFactsApi))
        })
    }
    console.log(this.state.allFacts.length)
  }
 
  // 若无其他修改allFacts的业务逻辑，这个生命周期可以直接删除
  componentDidUpdate(prevProps, prevState) {
    if(prevState.allFacts !== this.state.allFacts) {
      const tempFacts = JSON.stringify(this.state.allFacts)
      localStorage.setItem("allFacts", tempFacts)
    }
  }

  render() {
    return(
      <div></div>
    )
  }
}

export default LogicContainer;

改动说明 #

1. constructor中优先读取localStorage中的allFacts缓存，如果存在就直接初始化到state，跳过后续API请求
2. componentDidMount中新增判断逻辑，只有state中allFacts为空（无缓存）时才发起API请求拉取新数据
3. 修复了constructor中的多余语法错误
4. 若无其他修改allFacts的业务逻辑，可以直接删除componentDidUpdate中的重复存储逻辑，减少不必要的执行开销

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