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

【问题标题】：React JS: remove an item from the localStorageReact JS：从 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 中删除的数据。

标签： javascript html jquery css reactjs

【解决方案1】：

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

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

这是codesandbox中的一个工作示例

【讨论】：