localstorage同步工作的问题答案

【问题标题】：Issue in synchronous working of localstoragelocalstorage同步工作的问题
【发布时间】：2020-05-28 17:02:07
【问题描述】：

我正在尝试从本地存储中获取 useremail，但电子邮件没有立即更新。
我尝试过的解决方案 -
1. 在依赖数组中使用电子邮件，这会更新电子邮件，但不会在 DOM 中重新渲染人员
2. 在依赖数组中同时使用电子邮件和人员，这导致无限调用useEffect。
3.我在没有承诺的情况下直接尝试过，也没有更新电子邮件。
请提出正确的处理方法。

    const [people,setPeople]=useState([])
    const [email,setEmail] = useState('')
    useEffect(()=>{
        new Promise((res,rej)=>{
            setEmail(localStorage.getItem('userid')) //here is issue
            if(email) res();
            else rej(email);
        }).then(
            fire.firestore()
            .collection('Users').where('Email','==',email)
            .get().then((snapshot)=>{
                console.log(snapshot)
                setPeople(snapshot.docs[0].data().Name)
            })
            .catch(e=>{console.log(e)})
        )
        .catch((e)=>{console.log(e)})

    },[email,people])

【问题讨论】：

标签： javascript reactjs local-storage react-hooks

【解决方案1】：

您可以将获取电子邮件和人员的功能分开。我假设您只想在收到电子邮件时才能吸引人。

在初始呈现组件后获取电子邮件
然后为fire.firestore()...创建useEffect依赖是电子邮件

   const [people,setPeople]=useState([])
    const [email,setEmail] = useState('')
    useEffect(()=>{
        setEmail(localStorage.getItem('userid'))
    },[])
    
    useEffect(()=>{
     if(email){
        fire.firestore()
            .collection('Users').where('Email','==',email)
            .get().then((snapshot)=>{
                console.log(snapshot)
                setPeople(snapshot.docs[0].data().Name)
            })
            .catch(e=>{console.log(e)})
      } 
    },[email])

【讨论】：

【解决方案2】：

在 Promise 中包装 localStorage 调用会使其变得复杂。当电子邮件更改时，您需要进行 firestore 调用。以下是我可以建议的两种解决方案。

第一个仅在组件挂载并从状态中消除电子邮件时运行。

const [people, setPeople] = useState([]);

useEffect(() => {
  // you might need to wrap this in a try catch as it may fail if a user has disabled access to localStorag
  const email = localStorage.getItem("userid");

  if (email) {
    fire
      .firestore()
      .collection("Users")
      .where("Email", "==", email)
      .get()
      .then((snapshot) => {
        console.log(snapshot);
        setPeople(snapshot.docs[0].data().Name);
      })
      .catch((e) => {
        console.log(e);
      });
  }
}, []);

如果您希望在电子邮件更改时运行火灾存储效果。您可以将这两种效果分开，并使 firestore 效果取决于电子邮件更改，如下所示。

const [people, setPeople] = useState([]);
const [email, setEmail] = useState('');

useEffect(() => {
  const localStorageEmail = localStorage.getItem("userid");
  if (email) {
    setEmail(localStorageEmail);
  }
}); // dependence array ignored will run everytime the component rerenders

useEffect(() => {
  if (!email) return;

  fire
    .firestore()
    .collection("Users")
    .where("Email", "==", email)
    .get()
    .then((snapshot) => {
      console.log(snapshot);
      setPeople(snapshot.docs[0].data().Name);
    })
    .catch((e) => {
      console.log(e);
    });
}, [email]);

【讨论】：