我只想在localStorage中存储了一个值("id")时显示一个组件.单击按钮时会存储id.
{localStorage.getItem('id') != null ? <Game/> : null }
它工作正常,所以我单击按钮并将id存储在localStorage中,但只有在刷新之后,我才能看到组件.但我想在组件存储在本地后立即呈现它(不需要刷新页面)
有什么建议吗?
我只想在localStorage中存储了一个值("id")时显示一个组件.单击按钮时会存储id.
{localStorage.getItem('id') != null ? <Game/> : null }
它工作正常,所以我单击按钮并将id存储在localStorage中,但只有在刷新之后,我才能看到组件.但我想在组件存储在本地后立即呈现它(不需要刷新页面)
有什么建议吗?
我的版本,带有自定义挂钩.
import "./styles.css";
import { useState,useEffect } from "react";
function useLocalStorage(key) {
const [state, setState] = useState(localStorage.getItem(key));
function setStorage(item) {
localStorage.setItem(key, item);
setState(item);
}
return [state, setStorage];
}
export default function App() {
const [input, setInput] = useState("");
const [item, setItem] = useLocalStorage("myKey");
return (
<div className="App">
<input value={input} onInput={(e) => setInput(e.target.value)} />
<button onClick={() => setItem(input)}>Click</button>
<p>{item}</p>
</div>
);
}