reactjs - 如何在 React 中本地存储值后立即渲染组件

Question

我只想在 localStorage 中存储值(“id”)时才显示一个组件。单击按钮时会存储 id。

{localStorage.getItem('id') != null ? <Game/> : null }

它工作正常，所以我单击按钮并将 id 存储在 localStorage 中，但只有在刷新后我才能看到组件。但我想将组件存储在本地后立即渲染(不需要刷新页面)

有什么建议吗？

Answer 1

我的版本，带有自定义 Hook 。

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

https://codesandbox.io/s/bitter-sea-d6ni42?file=/src/App.js