Я работаю в следующем сценарии, в котором мой Localstorage содержит одинаковое значение для обоих моих элементов при обновлении. Не уверен, что это проблема с областью видимости того, где я использую свой хук Localstorage.
Codesandbox: https://codesandbox.io/s/stoic-satoshi-owsu9
Js:
const navLinks = [
{ text: 'Cars' },
{ text: 'Buses' }
];
const Items = ({ text, id, activeTab }) => {
const [count, setCount] = useLocalStorage("count", 0);
const plus = () => {
setCount(count + 1)
}
const minus = () => {
setCount(count - 1)
}
return (
<div
id={id}
className={activeTab === id ? "active" : null}
>
{text}
<h2>You clicked {count} times!</h2>
<button onClick={plus}>+</button>
<button onClick={minus}>-</button>
</div>
);
};
const Nav = ({ list, activeTab, onClick }) => {
return list ? (
list.map((item, index) => (
<Items
key={index}
text={item.text}
onClick={onClick}
activeTab={activeTab}
/>
))
) : (
<div>No Data</div>
);
};
function App() {
const [items, setlist] = useState([]);
useEffect(() => {
setlist(navLinks)
}, []);
return (
<Nav list={items} />
);
}
export default App;