使用本地存储在 React 中刷新页面后保持状态答案

【问题标题】：persist state after page refresh in React using local storage使用本地存储在 React 中刷新页面后保持状态
【发布时间】：2022-01-27 09:40:19
【问题描述】：

我希望在单击 displayBtn() 以显示 localStorage 中的项目时发生。

在useEffect() 中有 localStorage.setItem("localValue", JSON.stringify(myLeads)) MyLeads 是一个包含潜在客户的数组 const const [myLeads, setMyLeads] = useState([]); myLeads 状态在saveBtn() 被点击时改变setMyLeads((prev) => [...prev, leadValue.inputVal]);

在 DevTools > Applications 中，localStorage 正在更新，但当页面刷新时，localStorage 为空 []。刷新后如何使 localStorage 保持状态？我遇到了这个article 并应用了逻辑，但它并没有解决问题。我知道这是我做错了。

import List from './components/List'
import { SaveBtn } from './components/Buttons';

function App() {
  const [myLeads, setMyLeads] = useState([]);
  const [leadValue, setLeadValue] = useState({
    inputVal: "",
  });

  const [display, setDisplay] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setLeadValue((prev) => {
      return {
        ...prev,
        [name]: value,
      };
    });
  };

  const localStoredValue = JSON.parse(localStorage.getItem("localValue")) ;

  const [localItems] = useState(localStoredValue || []);

  useEffect(() => {
    localStorage.setItem("localValue", JSON.stringify(myLeads));
  }, [myLeads]);

  const saveBtn = () => {
    setMyLeads((prev) => [...prev, leadValue.inputVal]);
    // setLocalItems((prevItems) => [...prevItems, leadValue.inputVal]);

    setDisplay(false);
  };

  const displayBtn = () => {
    setDisplay(true);    
  };


  const displayLocalItems = localItems.map((item) => {
    return <List key={item} val={item} />;
  });

  return (
    <main>
      <input
        name="inputVal"
        value={leadValue.inputVal}
        type="text"
        onChange={handleChange}
        required
      />

      <SaveBtn saveBtn={saveBtn} />

      <button onClick={displayBtn}>Display Leads</button>

      {display && <ul>{displayLocalItems}</ul>}
    </main>
  );
}

export default App;```

【问题讨论】：

你打错了 - 将 saveBtn={saveBtn} 更改为 onClick={saveBtn}

标签： reactjs local-storage persistence

【解决方案1】：

你掉进了一个经典的 React Hooks 陷阱 - 因为使用 useState() 非常简单，你实际上是在过度使用它。

如果localStorage 是您的存储机制，那么您根本不需要useState()。你最终会在某个时候在你的两个来源之间就什么是“正确的状态”发生争执。

您的用例所需要的只是保存为您控制的input 组件提供文本的东西（我称之为leadText），以及保存display 布尔值的东西：

  const [leadText, setLeadText] = useState('')
  const [display, setDisplay] = useState(false)
  const localStoredValues = JSON.parse(window.localStorage.getItem('localValue') || '[]')

  const handleChange = (event) => {
    const { name, value } = event.target
    setLeadText(value)
  }

  const saveBtn = () => {
    const updatedArray = [...localStoredValues, leadText]
    localStorage.setItem('localValue', JSON.stringify(updatedArray))
    setDisplay(false)
  }

  const displayBtn = () => {
    setDisplay(true)
  }

  const displayLocalItems = localStoredValues.map((item) => {
    return <li key={item}>{item}</li>
  })

  return (
    <main>
      <input name="inputVal" value={leadText} type="text" onChange={handleChange} required />

      <button onClick={saveBtn}> Save </button>

      <button onClick={displayBtn}>Display Leads</button>

      {display && <ul>{displayLocalItems}</ul>}
    </main>
  )

【讨论】：