没有页面重新加载条件渲染在会话存储更改时不起作用

Question

import ReactDOM from 'react-dom';
import App from './App';

window.sessionStorage.setItem('doesitwork', '1')


ReactDOM.render(
    <App />,
  document.getElementById('root')
);

const sessionStorage = Boolean(window.sessionStorage.getItem("doesitwork"));

const App = () => <div>{sessionStorage && <h1>hello world!</h1>}</div>;

export default App;

我希望在启动此应用程序时出现 'hello world'，但在我重新加载页面之前没有任何反应。

该应用可在此处获得：https://codesandbox.io/s/patient-snowflake-tyijo?file=/src/App.js

Answer 1

您的脚本目前取决于模块加载的顺序，这会导致代码脆弱并使对代码的推理变得更加困难。不在模块的顶层检索 sessionStorage 值，而是仅在调用 App 时检索：

const App = () => {
  const sessionStorage = Boolean(window.sessionStorage.getItem("doesitwork"));
  return <div>{sessionStorage && <h1>hello world!</h1>}</div>;
};

export default App;

根据您当前的代码，根据模块加载顺序，App 模块可能运行在另一个模块之前，导致 sessionStorage = 行在运行ning 之前sessionStorage.setItem 行运行ning.

没有页面重新加载条件渲染在会话存储更改时不起作用

Without page reloading conditional rendering does not work when session storage changes

javascript

session-storage

reactjs