react中如何獲取父函數的返回值給子組件（使用props）

Question

我使用功能組件創建了一個簡單的反應應用程序。 父組件是“站點”，而子組件是“查看站點”。 我的父母有這個功能（網站組件）

function getSitesDB() {
    ref.onSnapshot((querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc) => {
            items.push(doc.data());
        }); 
        return items;
    });
}

我想從我的子（查看站點）組件中調用此函數並獲取它的返回值。 為此，我將我的子組件渲染為這樣，

<Route exact path="/sites">
    <ViewSites getSitesDB={getSitesDB}></ViewSites>
</Route>

並使用子組件中的道具調用該函數，

useEffect(() => {
    setLoading(true);
    const returnVal = props.getSitesDB();

    setLoading(false);
}, []);

我將此 returnVal 變量視為未定義，但此函數正確調用父函數。 只想知道如何取回返回值。 請幫助我，因為我是新手。

Answer 1

目前，您沒有從getSitesDB()函數返回任何內容，而且您不能因為只有在調用回調時才能訪問querySnapshot ，所以您可以嘗試從getSitesDB()返回一個promise並在回調時使用items解決它被稱為，是這樣的：

function getSitesDB() {
    return new Promise((resolve, reject)=> {
        ref.onSnapshot((querySnapshot) => {
            const items = [];
            querySnapshot.forEach((doc) => {
            items.push(doc.data());
            }); 
            resolve(items);
        });

    })
}

然后在你的useEffect()中，將 .then( .then()鏈接到這樣的函數，

useEffect(() => {
    setLoading(true);
    props.getSitesDB().then(returnVal => {
        // set returnVal to some state here so you can use it somewhere else in your component
        // =>> setState(returnVal)
        setLoading(false);
    })
}, []);

我不確定它是否能正常工作，因為我不知道“onSnapshot”來自哪里，它看起來像是在監聽一個事件並每次（可能不止一次）調用回調，一些變化發生在在這種情況下，它可能會引發錯誤，因為 promise 已經在初始調用時得到解決。

在mdn閱讀更多關於 Promise 的內容

Answer 2

調用getSitesDB時，您應該返回從 firestore 的onSnapshot函數獲得的項目。 onSnapshot函數會忽略您的退貨商品...

要獲取數據，您應該執行以下操作：

function getSitesDB() {
  return new Promise((resolve, reject) => {
    const items = [];
    ref.onSnapshot((querySnapshot) => {
      querySnapshot.forEach((doc) => items.push(doc.data()));
      resolve(items);
    });
  });
}

要支持在您的useEffect上卸載，您應該執行以下操作：

useEffect(() => {
  let canceled = false;
  const fetchData = async () => {
    setLoading(true);
    const sitesData = await getSitesDB();
    if (!canceled) {
      setSitesData(sitesData);
      setLoading(false);  
    }
  }

  fetchData();
  return () => {
    canceled = true;
  }
}, [getSitesDB]);

Answer 3

您可以通過多種方式實現。 1 Redux 2 上下文 API 3 傳統方式（在父組件中將該函數作為道具傳遞）

當你在組件中獲得作為道具的功能時，你可以使用如下提到的方式

useEffect(() => { const returnValue = props.funtionMentionInParent(); console.log(returnValue) }, []);

謝謝

Answer 4

在 Parent 使用狀態來保持函數的結果

import React, { useState } from "react";
const [sitesDB, setSitesDB] = useState(null);

還使用setSitesDB(items)更新狀態中的值。

function getSitesDB() {
    ref.onSnapshot((querySnapshot) => {
        const items = [];
        querySnapshot.forEach((doc) => {
            items.push(doc.data());
        }); 
        setSitesDB(items); // here state is updated
        return items;
    });
}

然后將函數和狀態傳遞給 Child

<Route exact path="/sites">
    <ViewSites getSitesDB={getSitesDB} sitesDB={sitesDB}></ViewSites>
</Route>

調用 Child 中的函數。 並在需要的地方使用狀態sitesDB 。

useEffect(() => {
    setLoading(true);
    props.getSitesDB();

    setLoading(false);
}, []);

console.log(props.sitesDB);