reactjs - Iterate over array with nested objects

Question

PROBLEM: I need to access the linkTitle values for each object in my array.

Here is how my savedLinksData array is structured:

And here is my code:

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

Full Code:

// 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);

标签： reactjs

Answer 1

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