Question

如何通过更改另一个组件的本地存储来更新组件？例如，使用react钩子，我想通过更改localstorage值来调用函数，但是不起作用：

React.useEffect(() => {
        //call a function by changing id value in localstorage
    }, [localStorage.getItem("id")])

Answer 1

您需要使用ContextProvider在不同组件之间共享相同的挂钩和数据。

import React, { useContext, useEffect, useState } from 'react';

import PropTypes from 'prop-types';

const MyContext = React.createContext();

const useMyHookEffect = (initId) => {
  const [id, setId] = useState(initId);
  const saveId = (id) => {
    window.localStorage.setItem('id', id);
    setId(id);
  };

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

  return { id, saveId };
};

// Provider component that wraps app and makes themeMode object
export function MyHookProvider({ children, id }) {
  const myEffect = useMyHookEffect(id);
  return (
    <MyContext.Provider value={myEffect}>
        {children}
    </MyContext.Provider>
  );
}

MyHookProvider.defaultProps = {
  children: null,
  id: null,
};

MyHookProvider.propTypes = {
  children: PropTypes.node,
  id: PropTypes.string,
};

export const useMyHook = () => useContext(MyContext);

您需要在组件外部将其称为提供程序。

<MyHookProvider>
  <ComponentA />
  <ComponentB />
</MyHookProvider>

现在，您可以在组件之间使用共享钩子。

export function ComponentA(){
  const { id, saveId } = useMyHook(null);
  return (<div>{id}<button onClick={() => saveId(2)}></button></div>);
}

Answer 2

您可以使用window.addEventListener('storage ...

 React.useEffect(() => {
       function example() {
        //call a function by changing id value in localstorage
       }
       window.addEventListener('storage', example) 
       return () =>  window.removeEventListener('storage', example) 
      } , [ ])

在example内，您可能会检查id是使功能运行的localStorage件

Answer 3

当您要重新渲染元素时，应使用状态。通过使用状态，使用此变量的每个元素都会自动更新。您可以使用钩子useState（）。

import React, { useState, useEffect } from 'react';

const [ id, setId ] = useState(initalValue);

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

return(
    'Your code and the element that should update'
);

反应-使用本地存储更新组件

3 个答案: