React:使用 localStorage 和 React 钩子，除非单击按钮，否则如何使我的组件无法重新加载?

Question

目前我的应用程序正在通过挂载主组件的获取来访问外部数据，每当我重新加载页面时，它都会重新加载数据并重置我链接到它的本地存储项。

但是，我想要的是： 1(用户第一次打开页面时，必须加载整个数据集 2( 如果用户删除了表中的任何项目，然后关闭选项卡或重新加载页面，则这些已删除的项目不应重新出现在数据集和表中(除非单击"重新加载"按钮(

我的主要组件目前如下所示：

function App() {
const DEFAULT_ERROR = null
const DEFAULT_IS_LOADED = false
const DEFAULT_DATASET = []
const DEFAULT_INPUT_VALUE = ''
const DEFAULT_DROPDOWN_VALUE = 'year'
const DEFAULT_GRAPH_DATA = []
const URL = 'https://reqres.in/api/unknown'
const [ error, setError ] = React.useState(DEFAULT_ERROR)
const [ isLoaded, setIsLoaded ] = React.useState(DEFAULT_IS_LOADED)
const [ dataset, setDataset ] = React.useState(DEFAULT_DATASET)
const [ inputValue, setInputValue ] = React.useState(DEFAULT_INPUT_VALUE)
const [ dropdownValue, setDropdownValue ] = React.useState(DEFAULT_DROPDOWN_VALUE)
const { graphData, setGraphData } = React.useState(DEFAULT_GRAPH_DATA)
localStorage.setItem('hasBeenLoaded', false)
let hasBeenLoaded = JSON.parse(localStorage.getItem('hasBeenLoaded'))
if (!hasBeenLoaded) {
localStorage.setItem('hasBeenLoaded', true)
hasBeenLoaded = JSON.parse(localStorage.getItem('hasBeenLoaded'))
console.log(hasBeenLoaded)
React.useEffect(() => {
requestData(URL, setIsLoaded, setDataset, setError)
}, [])
}

我尝试在本地存储中存储一个值，该值跟踪应用程序是否已加载到用户 PC 上，因此它不会重新运行带有 fetch 请求的 useEffect，但由于某种原因它似乎仍在运行，我删除的任何表项目都会在重新加载时重新出现。

requestData函数如下：

function requestData(url, setIsLoaded, setDataset, setError) {
return fetch(url)
.then(response => response.json())
.then(
(result) => { 
setIsLoaded(true)
for (let i=0; i < result.data.length; i++) {
localStorage.setItem(result.data[i].id, JSON.stringify(result.data[i]))
setDataset(
prevDataset => [...prevDataset, JSON.parse(localStorage.getItem(result.data[i].id))]
)
}
},
(error) => {
setIsLoaded(true)
setError(error)
}
)
}

我应该怎么做才能使我的组件按计划工作？这是我的笔以防万一。

此致敬意 康斯坦丁

Answer 1

正如@charlietfl所说，您将hasBeenLoaded的值始终设置为 false，因此它将始终获取数据，其工作的逻辑是：

1. 检查本地存储中是否存在hasBeenLoaded变量
2. 如果没有，请调用您的requestData方法(您甚至不需要useEffect(
3. 如果是，则不要执行任何操作

然后，当用户单击重新加载按钮时，您将变量设置为 false

const hasBeenLoaded = localStorage.getItem('hasBeenLoaded')
if(!hasBeenLoaded){
requestData(URL, setIsLoaded, setDataset, setError)
localStorage.setItem('hasBeenLoaded', true)
}