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

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

问题

您正在获得最后单击的按钮值，因为您对每个计数器使用相同的本地存储键。

解决方案为Counter组件添加一个属性来标识每个计数器:

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>
);
}

工作示例

Answer 2

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

localStorage.setItem('abc',1)

上面是一个如何在本地存储器中设置abc状态为1的例子。

刷新页面后，我们可以做:

abc = localStorage.getItem('abc')

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

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