React JS：从 localStorage 中删除一个项目

Posted 2023-02-22

【中文标题】React JS：从 localStorage 中删除一个项目

【英文标题】：React JS: remove an item from the localStorage

【发布时间】：2022-01-05 17:53:28

【问题描述】：

我正在尝试制作一个可行的应用程序，您可以在其中从 API 获取一些数据，并且该数据每 3 秒随机更改一次，并且用户可以使用按钮打印数据并再次按下它会停止，我已经设法完成这个（如下所示）部分（btw new to react js）：

useEffect(() =>
    const interval = setInterval(() => 
      getJoke()
    ,3000);
    return () => clearInterval(interval);
  ,[])
  //fetch the jokes function
  const getJoke = (() => 
    fetch('https://api.chucknorris.io/jokes/random')
    .then((res) => res.json())
    .then((res) => 
      setKey(res.id);
      setJoke(res.value);
    )
    .catch((err) => console.log(err));
  )

我还制作了一个按钮，用户可以在其中将数据（每 3 秒随机出现一次）保存在浏览器的 localStorage 中，如下所示..

const addJokeFav = (() => 
    jokes.push(joke);
    const jokesJsonified = JSON.stringify(jokes);
    localStorage.setItem(key, jokesJsonified);
  )
  
  bellow the render code
  
  <button id="button" onClick=()=>addJokeFav()>Save!</button>

但我希望只有一个按钮，他可以在其中保存一个随机的数据，每 3 秒一次，如果他重新按下按钮，数据将从 localStorage 中删除。我这里有这个功能，但我似乎无法让它工作。

const remJokeFav = (() => 
    const jokesJsonified = JSON.stringify(jokes);
    localStorage.removeItem(key, jokesJsonified);
  )

似乎正在尝试删除不存在导致密钥的项目，我在响应中使用 setKey(res.id) 在第一个 sn-p 中的上述代码中使用它。 我的 App 变量如下。

const [joke, setJoke] = useState();
  const [key, setKey] = useState([]);
  const [isActive, setActive] = useState("false");
  const jokes = [];

感谢您提供有关此情况的任何帮助！

【问题讨论】：

只是为了弄清楚问题，你想从 localStorage 中删除所有笑话还是只删除当前的笑话？

@KarthikRP 只是屏幕上刚刚显示的当前笑话。用户将它放在本地存储中，如果他再次按下切换按钮或任何其他按钮将被删除

如果只需要删除当前的笑话，则需要像这样使用removeItem localStorage.removeItem(key)

@KarthikRP 似乎该按钮没有做任何事情，但如果我按下它的速度足够快，它会删除该条目而不会出现在本地存储中。就像它不允许它，并且关键变化很快

检查一下，codesandbox.io/s/brave-moser-l1xut?file=/src/App.js 您可以检查 chrome 应用程序选项卡中是否有正在从 localStorage 中删除的数据。

【参考方案1】：

问题似乎出在localStorage.removeItem(key, jokesJsonified); removeItem 只需要键而不是值。

在设置笑话数组时也有不必要的重新渲染。将笑话数组设为 ref 而不是 state。

这是codesandbox中的一个工作示例