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

Question

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

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

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

有什么建议吗？

Answer 1

组件通常随着状态的变化而呈现。您可以为本地存储绑定一个状态（如果您无论如何都需要本地存储）并且每次都更新状态。如果你想存储在本地存储中，那么从状态中获取值。

示例：

const [userid, setUserId] = useState(localStorage.getItem('id'));


const onSave : (value) => {
   localStorage.setItem('id', JSON.stringify(value))
   setUserId(value)
}

return (
    <div>
       {userid != null ? <Game/> : null }
    </div>
)

Answer 2

您必须使用状态管理，本地存储已更新但您的 DOM 没有意识到，要解决此问题，请查看以下示例

为此，我们使用 useState 挂钩，这里我们使用本地存储中的值初始化 idLocal 值

  let [idLocal, setIdLocal] = useState(localStorage.getItem("id"));

那么您必须将此值用于条件，因为此值的更改将在 DOM 中可见，setIdLocal 用于设置或更新此 idLocal

{idLocal? <Game/> : null }

用于更新按钮上的值单击

 <button onClick={()=>setLocalstore()}>Off</button>

setLocalstore =()=>{
setIdLocal(whatever value you want)
}

查看这个最小示例 https://codesandbox.io/s/react-hooks-usestate-forked-5j6ck0?file=/src/index.js:567-605

Answer 3

1.Initiate 状态：

const [id, setId] = useState(
  localStorage.getItem('id') ? <Game/> : null
);

2.Save 本地存储中的每个更改：

useEffect(() => {
  localStorage.setItem('id', id);
}, [id])

3.Render 组件使用状态

Answer 4

我的版本，带有自定义挂钩。

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

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

How to render component as soon as the value stored in local in React

reactjs

react-component

react-hooks