使用嵌套对象迭代数组答案

【问题标题】：Iterate over array with nested objects使用嵌套对象迭代数组
【发布时间】：2020-12-22 14:22:45
【问题描述】：

问题：我需要访问数组中每个对象的linkTitle 值。

这是我的savedLinksData 数组的结构：

这是我的代码：

 {savedLinksData.map((saved, key) => (
        <h1>{saved.linkType}</h1>
      ))}

完整代码：

// query for saved links data
  useEffect(() => {
    if (user) {
      async function fetchData() {
        const request = await db
          .collection("users")
          .doc(user)
          .collection("saved")
          .onSnapshot((snapshot) =>
            setSavedLinks(
              snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
            )
          );
      }
      fetchData();
    } else {
      setSavedLinks([]);
    }
  }, [user]);

  useEffect(() => {
    if (savedLinks.length > 0) {
      let newArray = [];
      savedLinks.map((saved) => {
        db.collection("users")
          .doc(saved.savedUser)
          .collection("links")
          .doc(saved.savedLinkId)
          .get()
          .then(function (doc) {
            if (doc.exists) {
              // console.log("Document data:", doc.data());
              newArray.push(doc.data());
              // setSavedLinksData([...savedLinksData, doc.data()]);
            } else {
              // doc.data() will be undefined in this case
              console.log("No such document!");
            }
          })
          .catch(function (error) {
            console.log("Error getting document:", error);
          });
      });
      setSavedLinksData(newArray);
    }
  }, [savedLinks]);

  console.log("RETURNED LINKS DATA", savedLinksData);
  console.log("SAVED", savedLinks);

【问题讨论】：

数组中的项目似乎没有 linkTitle 属性。它是嵌套在其中一个子文档中的属性吗？
所以只需将saved.linkType 更改为saved.linkTitle。不过，我无法真正说出您的数据的形状，如果您能提供代码，而不仅仅是图像，那就更好了:)
@MathieuK。抱歉，linkTitle 嵌套在我的 linkInfo 对象中
很好，如果它嵌套在linkInfo 中，那么您可以通过点符号saved.linkInfo.linkTitle 访问它。这对你有用吗
从您提供的代码中很难看出，您能否包含组件的完整代码？

标签： reactjs

【解决方案1】：

你可以 {savedLinksData.map((saved, key) => ( <h1>{saved.linkInfo.linkTitle}</h1> ))}

【讨论】：