仅在满足条件时执行 componentDidMount()

Question

我的任务是调用 API，将 API 数据保存到本地存储，并在重新加载页面时检索相同的数据。

但是，API 会在每次 F5 时被调用，并且它包含的数据会随机化（因为 API returns 一堆随机事实）。所以我有 Mount() 和 Update()，数据在本地存储中，但我无法让它保留并从那里检索。

我在 Mount() 中尝试了一些 if 语句，例如检查长度等，但 none 有效。帮助，我不知道我做错了什么。这是代码：

import React from "react"

class LogicContainer extends React.Component {
constructor() {
    super()
    this.state = {
        isLoading: true,
        allFacts: []
    }
    )
}

//Call to API, get facts, put them into local storage.
componentDidMount() {
    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)
  }
 
/*check if facts have changed on reload and save them in tempFacts*/
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;

Answer 1

您正在正确地将数据设置到本地存储中。但问题是你从来没有真正检索过它。您只是将其置于状态中，但当组件的生命周期结束时（例如 F5 出现时），状态将重置。这是在 localStorage 中检索数据的代码：

localStorage.getItem("allFacts")

切记：当用户刷新网站时，“componentDidUpdate”不会运行，因为页面实际上是从头开始重新加载。你实际上应该做的是在你的“componentDidMount()”中添加上面提到的代码片段来检查以前的数据是否存在于 localStorage 中或者是否应该从 API 中检索它。如果数据存在，则将状态设置为该数据。否则，像现在一样从 API 中获取数据：

componentDidMount() {

    // Check if localStorage has an assigned value for item "allFacts"
    if(localStorage.getItem("allFacts")!== null){

        // Set the state to that
        this.setState({ 
            isLoading: false,
            allFacts: localStorage.getItem("allFacts")
            })
    
    // Otherwise, retrieve it from the API and set the state as well as the localStorage
    }else{

        
        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)
  }

仅在满足条件时执行 componentDidMount()

Execute componentDidMount() only when a condition is met

local-storage

reactjs