useEffect中的数据是如何在页面加载时工作的

Question

当页面加载useEffect时，我正在从Firebase获取数据。我想在应用程序中像socialLinks一样使用socialLinks.instagram状态，但是我得到了这个错误“无法读取未定义的属性(读取'instagram')”.When，我一个一个地分配socialLinks，然后在useEffect中分配它们，并在没有出现错误的页面中使用。有人能解释为什么我需要一个接一个地分配它们，而不是从socialLinks.instagram .You中读取，也可以在下面找到我的防火墙数据映像。

  const [socialLinks, setSocialLinks] = useState();
  const [instagram, setInstagram] = useState();
  const [tiktok, setTiktok] = useState();
  const [youtube, setYoutube] = useState();
  useEffect(() => {
    const getSocialLinks = async () => {
      const docRef = doc(socialLinksCol, "24STOxvBEmCezY16LD");
      const fireStoreData = await getDoc(docRef);
      setSocialLinks(fireStoreData.data()); // I can't use this data in <a>
      setYoutube(fireStoreData.data().youtube);  // I can use this data in <a>
      setInstagram(fireStoreData.data().instagram);
      setTiktok(fireStoreData.data().tiktok);
    };
    getSocialLinks(); 
  }, []);

console.log(socialLinks)
//output : {instagram: 'https://www.instagram.com/', youtube: 'https://www.youtube.com/', tiktok: 'https://www.tiktok.com/en/'}

//This is where I use the socialLinks in

    <a href={socialLinks.instagram}>Instagram</a> // This give error
    <a href={tiktok}>Tiktok</a> // This is fine
    <a href={youtube}>Youtube</a>

​

​

Answer 1

当组件第一次呈现空状态时。

例如：

const [socialLinks, setSocialLinks] = useState();

结果将声明一个名为socialLinks的变量。由于您没有向useState传递任何参数，所以socialLinks将是undefined。

现在，useEffect将运行。它将在后台启动异步操作(而不是阻止组件的呈现)。

当数据正在获取时，组件将尝试第一次呈现。您引用socialLinks.instagram和socialLinks是未定义的，因此您将得到一个错误。

在加载数据之前，您可能不希望呈现任何内容。

有多种方法可以做到这一点。如果您希望代码与您现在拥有的html一起工作，只需将初始状态声明为空，如下所示的社交链接：

const [socialLinks, setSocialLinks] = useState({ 
  instagram: '', tiktok: '', youtube: '' 
});

如果您只想检查数据是否存在，那么您可以将状态保留为未定义的状态，然后在呈现时检查它是否可用：

if (socialLinks && socialLinks.instagram) {
   return <a href={socialLinks.instagram}>Instagram</a>;
} else {
   return null;
}

请记住，调用setSocialLinks会导致状态更新，因此当数据存在时，它将重新呈现组件！