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