React 中的本地存储和持久状态答案

【问题标题】：Local storage and persistent state in ReactReact 中的本地存储和持久状态
【发布时间】：2021-08-14 17:50:17
【问题描述】：

我想制作一个点赞按钮，用户可以在其中点击和点赞。当用户单击按钮时，即使刷新后仍保持红色。我该如何实现？

我有这个代码。当我刷新本地存储被重置。我该如何解决这个问题？

useEffect(() => {
  setColor(window.localStorage.getItem('color'));
}, []);

    useEffect(() => {
     window.localStorage.setItem('color', color);
}, [color]);

    
const handleClick =  () => {
  setClicked(prevValue => !prevValue)

  if(clicked){
    setColor("red")
  }else{
    setColor("")
 }
}

    <div className="App">
      <div className="container">
       <button style={{backgroundColor: color}} onClick={handleClick} > +</button>
   </div>
 </div>

【问题讨论】：

在将项目设置为存储时，您可以尝试添加 if check 吗？ ` if(color)` 像这样
在codesandbox中测试，效果很好
我认为问题出在我的浏览器中。我让它停止刷新，但我仍然需要单击两次才能使其变为红色。我认为这与设置后立即使用的状态有关。 “如果（点击）”

标签： reactjs

【解决方案1】：

试试这个方法。我们需要检查两次localStorage，第一次是在安装组件时，第二次是在我们单击按钮时。 example

App.js

import { useState, useEffect } from "react";
const App = () => {
  const [color, setColor] = useState("");

  useEffect(() => {
    const lS = window.localStorage.getItem("color");
    if (lS) return setColor(lS);
    localStorage.setItem("color", "");
  }, []);

  const handleClick = () => {
    const lS = window.localStorage.getItem("color");
    if (lS === "") {
      localStorage.setItem("color", "red");
      setColor("red");
    }
    if (lS !== "") {
      localStorage.setItem("color", "");
      setColor("");
    }
  };

  return (
    <div className="App">
      <div className="container">
        <button
          style={{ backgroundColor: color }}
          className="like-button"
          onClick={handleClick}
        >
          +
        </button>
      </div>
    </div>
  );
};
export default App;

【讨论】：

【解决方案2】：

我试图在沙盒中复制此错误。但是，在我的机器上它可以工作。会不会是您在项目的其他地方有 localStorage.removeItem('color') 并被调用？或者你的浏览器有问题。这是它工作的沙箱：https://codesandbox.io/s/magical-shannon-cot7i?file=/src/App.js

【讨论】：

我也尝试过沙盒，它可以工作。但是他的handleClick函数有一个缺陷可能与此有关。
是的，它在您的示例中有效，但是当您最初单击该按钮时，您必须单击它两次。这是为什么？您也可以通过刷新来检查

【解决方案3】：

我希望它会起作用我还没有测试过，但我相信它应该会起作用

useEffect(() => {

const storedColor = localStorage.getItem('color')

  if(storedColor) {
   setColor(storedColor);
  }
}, []);
    
const handleClick =  () => {
  setClicked(prevValue => !prevValue)

  if(clicked){
    setColor("red");
    localStorage.setItem('color', color);
  }else{
    setColor("")
 }
}

  return <div className="App">
      <div className="container">
       <button style={{backgroundColor: color}} onClick={handleClick} > +           </button>
      </div>
    </div>

【讨论】：

不，抱歉，它不起作用。我认为本地存储被覆盖。主要问题是您必须单击两次才能更改颜色。
可以分享沙盒的链接吗？
当你刷新时，你可以看到它回到了初始状态。它没有保持红色。
检查链接现在它开始工作了。但我不知道这是否是最佳做法。
仍然是单击它两次使其工作的问题。您可以检查初始渲染。你必须点击两次。