Cannot read properties of undefined only on refresh.

huangapple go评论79阅读模式
英文:

Cannot read properties of undefined only on refresh

问题

在使用Firebase和React设置配置文件时,我遇到了Cannot read properties of undefined: (reading 'name')错误。然而,奇怪的是,这种情况发生在我保存更改后刷新页面时,我很好奇为什么会发生这种情况。

以下是刷新之前(当我的工作已保存)的情况:
Cannot read properties of undefined only on refresh.

以下是刷新本地主机后的情况:
Cannot read properties of undefined only on refresh.

以下是我的当前代码:

useEffect(() => {
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      const snapshot = await getDoc(doc(db, "users", user.uid));
      console.log(snapshot.data().name);
      const userData = snapshot.data();
      
      setProfile(userData);
    } 
  });
}, []);

return (
  <>
    <Card>
      <Card.Body>
        <h2 className="text-center mb-4"> Profile</h2>
        <p className="details">
          {JSON.stringify(profile.name)}
        </p>
        {error && <Alert variant="danger">{error}</Alert>}
      </Card.Body>
    </Card>
    <div className="w-100 text-center mt-2">
      <Button variant="link" onClick={handleLogout}>
        {" "}
        Log out{" "}
      </Button>
    </div>
  </>
);

目前,我将继续使用JSON.stringify(profile),因为它能正常工作,但我只是对这个问题感到好奇。

英文:

While setting up a profile using firebase and react, I am getting the error of Cannot read properties of undefined: (reading &#39;name&#39;)
However, the strange part is that this doesn't happen when I save my changes but when I refresh the page. I am curious, why is this happening?

Here is before refresh(when my work is saved):
Cannot read properties of undefined only on refresh.

Here is after I refresh the localhost:
Cannot read properties of undefined only on refresh.

Here is my current code:

  useEffect(() =&gt; {
    onAuthStateChanged(auth, async (user) =&gt; {
      if (user) {
        const snapshot = await getDoc(doc(db, &quot;users&quot;, user.uid))
        console.log(snapshot.data().name)
        const userData= snapshot.data();
        
        setProfile(userData);

      } 
    });
  }, []);



  return (
    &lt;&gt;
      
      &lt;Card&gt;
        &lt;Card.Body&gt;
          &lt;h2 className=&quot;text-center mb-4&quot;&gt; Profile&lt;/h2&gt;
          &lt;p className=&quot;details&quot;&gt;
          {JSON.stringify(profile.name)}
          &lt;/p&gt;
          {error &amp;&amp; &lt;Alert variant=&quot;danger&quot;&gt;{error}&lt;/Alert&gt;}
        &lt;/Card.Body&gt;
      &lt;/Card&gt;
      &lt;div className=&quot;w-100 text-center mt-2&quot;&gt;
        &lt;Button variant=&quot;link&quot; onClick={handleLogout}&gt;
          {&quot; &quot;}
          Log out{&quot; &quot;}
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
};

For now, I'll continue to just use JSON.stringify(profile) as that works fine but just was curious on this issue.

答案1

得分: 1

Cannot read properties of undefined: (reading 'name')

这个错误意味着,没有名为 name 的可用属性。你面临这个问题是因为在第一次呈现DOM时没有API数据,然后才调用 useEffect

要解决这个问题,你可以使用以下方法:

  1. 可选链接:像这样 profile?.name

  2. 使用条件渲染:

    {profile?.name && (<p className="details">{JSON.stringify(profile.name)}</p>)}
    

对于这种类型的错误,始终使用这些方法。

英文:

Cannot read properties of undefined: (reading 'name')

This error means, no property available with name. This problem you facing bcoz DOM is render first time without the api data then useEffect called.

To resolve the problem you can use

  1. Optional Chaining :- Like this profile?.name

  2. Use conditional rendering:-

      {profile?.name &amp;&amp; (&lt;p className=&quot;details&quot;&gt;
      {JSON.stringify(profile.name)}
      &lt;/p&gt;)}
    

Always use these for this type of error.

huangapple
  • 本文由 发表于 2023年3月9日 12:53:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75680556.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定