Слушайте изменение локального хранилища с помощью React в компоненте App. js - PullRequest
Новая
       27

Слушайте изменение локального хранилища с помощью React в компоненте App. js

0 голосов
/ 06 августа 2020

Я пытаюсь прослушать изменение в локальном хранилище для запуска функции, в основном, когда токен пользователя попадает в локальное хранилище, я хочу его прослушать, но он обнаруживает его только тогда, когда я обновляю sh. 

const user = JSON.parse(getItem(`user`));

const App = () => {
const [isUser, setIsUser] = useState(false)

if(user){
 setIsUser(true)
}

    return (
            <Provider store={store}>
                <div>
                    <Router />
                </div>
            </Provider>  
    );
};

export default App;

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

Если вам нужен доступ к LocalStorage, реагирующий (реактивный), вы можете написать собственный хук, который достигнет этого:

https://usehooks.com/useLocalStorage/

0 голосов
/ 06 августа 2020

Создайте useEffect, который прослушивает изменение события хранилища и присоединяет функцию, которая запускается при событии изменения. 

  useEffect(() => {

    window.addEventListener("storage", e => storageChange(e));

    return () => {
      window.removeEventListener('storage', e => storageChange(e));
    };
  })


  const storageChange = (storageEvent: StorageEvent) => {
    if (storageEvent.key === keyNameConst) {
      //do something
    }
  }

С вашим кодом: 

const App = () => {
  const [isUser, setIsUser] = useState(false);
  const [user, setUser] = useState("");

  useEffect(() => {
    window.addEventListener("storage", e => storageChange(e));
    return () => {
      window.removeEventListener('storage', e => storageChange(e));
    };
  },[storageChange])


  const storageChange = (storageEvent: StorageEvent) => {
    if (storageEvent.key === "user") {
      const user = JSON.parse(storageEvent.newValue);
      setUser(user);
      setIsUser(true);
    }
  }


  return (
    <Provider store={store}>
      <div>
        <Router />
      </div>
    </Provider>
  );
};

export default App;
...