在功能组件中刷新后反应从本地存储中获取项目答案

【问题标题】：React get item from local storage after refresh in functional component在功能组件中刷新后反应从本地存储中获取项目
【发布时间】：2020-04-16 11:14:58
【问题描述】：

我正在学习在 React 中使用函数式组件，并且我做了一个简单的事情来增加和减少数字。我也在使用本地存储，它工作正常，但我希望刷新页面后数字保持不变。在这种情况下，如果我想在组件加载时使用一次 localStorage.getItem ，它将去哪里？据我了解，useEffect 每次在组件呈现时都有效。 componentDidMount 可以用在函数式组件中从存储中获取item吗？

import React, {useState, useEffect} from 'react';
import './Clicker.css';


function Clicker() {
    const [number, setNumber] = useState(0);
    useEffect(() => {
        localStorage.setItem("number", number)
    })
    function refresh() {
        return localStorage.setItem("number", 0),
        setNumber(0);
    }
  return (
    <div className="clicker">
        <p className="number">{number}</p>
        <button className="add-button" onClick={() => setNumber(number + 1)}>+</button>
        <button className="refresh-button" onClick={() => refresh()}>0</button>
        <button className="substract-button" onClick={() => setNumber(number - 1)}>-</button>
    </div>
  );
}

export default Clicker;

【问题讨论】：

标签： reactjs

【解决方案1】：

无论何时增加或减少数字，您都必须更新 localStorage。同样当页面刷新时，号码也会重新初始化。

function Clicker() {
    const previousNumber = localStorage.getItem("number") || 0;
    const [number, setNumber] = useState(previousNumber);
    useEffect(() => {
        localStorage.setItem("number", number)
    }, [number])
    // then this function is useless
    function refresh() {
        return localStorage.setItem("number", 0),
        setNumber(0);
    }
  return (
    <div className="clicker">
        <p className="number">{number}</p>
        <button className="add-button" onClick={() => setNumber(number + 1)}>+</button>
        <button className="refresh-button" onClick={() => refresh()}>0</button>
        <button className="substract-button" onClick={() => setNumber(number - 1)}>-</button>
    </div>
  );
}

我不确定刷新方法里面的代码，它会变得没用。您可以尝试以编程方式刷新页面。

【讨论】：