如何使计数器按钮在页面重新加载后保持不变

Question

我正在尝试实现计数器按钮，这些按钮应该在页面重新加载后持续存在。目前我的按钮都是单独递增的，但在页面上，重新加载时只有第一个/顶部的按钮会受到影响。如果我单击其他计数器按钮，当我重新加载页面时，第一个按钮显示我在重新加载页面之前单击的最后一个按钮的计数。我在数据中映射的每个用户都有按钮，但它似乎只看到一个按钮。我需要的计数器组件，以动态添加每个用户的计数器按钮。

我读到在组件级别的localStorage中使用同一组件的多个实例存储状态可能会导致意外行为的一个问题。所以我猜一种解决方案是使用Redux来存储状态，但到目前为止我还没有机会实现它。我该怎么做呢？

下面是我的按钮组件：

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  React.useEffect(() => {
    const parsedCount = Number(localStorage.getItem("count") || 0)
    setCount(parsedCount)
  }, [])

  React.useEffect(() => {
    localStorage.setItem("count", count)
  }, [count])

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h5>Count is {count}</h5>
      <button onClick={handleIncrement}>+</button>
    </div>
  );
}

这是我的App.js，我在这里调用计数器按钮：

import React from 'react';
import Counter from "./components/Counter";
import './App.css';
import { useAsync } from 'react-async';

function App() {

const loadUsers = async () =>
  await fetch("")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

function App() {
  const { data, isLoading } = useAsync({ promiseFn: loadUsers })
  if (isLoading) return "Loading..."
  if (data)

  return (
    <div className="container">
      <div>
      </div>
      {data.map(user=> (
        <div key={user.username} className="row">
          <div className="col-md-12">
            <h2>{user.name}</h2>
            <h3>{user.title}</h3>
            <Counter/>
          </div>
        </div>
      ))}
    </div>
  );
}

export default App;

Answer 1

问题

您将获得上次单击的按钮值，因为您对每个计数器都使用相同的本地存储键。

解决方案

向计数器组件添加一个属性以标识每个计数器：

function Counter({id}) {
  const [count, setCount] = useState(0);
  const KEY = `count-${id}`;

  React.useEffect(() => {
    const parsedCount = Number(localStorage.getItem(KEY) || 0)
    ...
  }, [])

  React.useEffect(() => {
    localStorage.setItem(KEY, count);
  }, [count]);
...
}

使用：

function App() {

  return (
    <div className="container">
      <div>
         <Counter id="counter-1"/>
      </div>
    </div>
  );
}

Working example

Answer 2

每当您刷新浏览器时，都会刷新您的状态。但是你可以在你的浏览器中设置状态。

localStorage.setItem('abc',1)

上面是一个示例，说明如何在本地存储中将abc的状态设置为1。

刷新页面后，我们可以执行以下操作：

abc = localStorage.getItem('abc')

因此，abc将等于"1" (请注意，它将返回一个字符串)。

就react应用程序而言，当组件首次挂载/初始化时，您可以读取localStorage并相应地更新您的状态。