我只想在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>
  );
}

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

Reactjs相关问答推荐

如何在react组件中使用formik进行验证

单击按钮时在子元素中不显示任何内容-react

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

利用OVERPASS API端点计算某建筑的表面积

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

如何从Reaction-Arborist树获取排序数据

useEffect firebase 清理功能如何工作?

将 useRef 与 useImperativeHandle 一起使用时,React 不会重新渲染

获取 不能显示为 的后代.错误,但不太确定如何构建我的代码以避免此警告

提前输入错误:选项类型上不存在属性名称

获取更多数据后更新 DOM,而不刷新 React.js 中的页面

如何在PrimeReact的表格中修改筛选图标功能

文本的几个词具有线性渐变 colored颜色 - React native

如何到达类组件中的状态?

臭名昭著的测试未包含在 act(...) 中

Next.js i18n 路由不适用于动态路由

使用输入类型文本对 useState 和日期做出react

模块解析失败:意外令牌 (257:106) 您可能需要适当的加载程序来处理此文件类型

gtag:为什么谷歌分析即使没有被授权也会收集数据