Dalam React, localstorage.getItem mengembalikan null

Question

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
const obj = { a: "xxx", b: "yyy" }
localStorage.setItem('obj', JSON.stringify(obj));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

client.js:

let settings = JSON.parse(localStorage.getItem('obj'));
const oktaAuth = new OktaAuth({
    issuer: settings['a'],
    clientId: settings['b'],
    redirectUri: window.location.origin + '/login/callback',
    logoutUrl: window.location.origin + '/login',
    // pkce: false
});

Saya mengimport klien dalam Apl dan nampaknya localStorage harus menetapkan Item sebelum client.js dijalankan. Tetapi localStrorage.getItem('obj') saya adalah batal. Adakah sesiapa tahu mengapa?

Answer 1

Gunakan useEffect()

import React, {useEffect} from 'react';

const App = () => {

useEffect(() => {
const obj = { a: "xxx", b: "yyy" }
localStorage.setItem('obj', JSON.stringify(obj));
},[])

return (
     

)
}