react中如何获取父函数的返回值给子组件（使用props）答案

【问题标题】：How to get the return value of parent function to child component in react (Using props)react中如何获取父函数的返回值给子组件（使用props）
【发布时间】：2021-11-25 03:26:04
【问题描述】：

我使用功能组件创建了一个简单的反应应用程序。父组件是“站点”，而子组件是“查看站点”。我的父级（站点组件）中有此功能

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>

并使用子组件中的props调用函数，

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

    setLoading(false);
}, []);

我将此 returnVal 变量视为未定义，但此函数正确调用父函数。只想知道如何取回返回值。请帮助我，因为我是新手。

【问题讨论】：

你没有对 returnVal 值做任何事情，只是在 useEffect 中使用它，你需要添加一个状态来保存它。
你没有从函数getSitesDB返回任何东西

标签： javascript reactjs react-hooks react-router react-props

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以通过多种方式实现。 1 还原 2 上下文 API 3 传统方式（在父组件中作为道具传递该功能）

当你在组件中获得作为道具的功能时您可以使用如下提及的方式

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

谢谢

【讨论】：

【解决方案3】：

调用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]);

【讨论】：

【解决方案4】：

目前，您没有从 getSitesDB() 函数返回任何内容，并且您不能因为您只能在调用回调时访问 querySnapshot，您可以尝试返回一个 @ 987654324@ 来自getSitesDB() 并在调用回调时使用items 解决它，如下所示：

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

    })
}

然后在您的useEffect() 中，将.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阅读更多关于承诺的信息

【讨论】：