React使用props时如何在子组件获取父组件函数的返回值

问题根源 #

异步回调的返回值无法被外层同步函数直接接收，你当前的写法存在两个问题：

1. ref.onSnapshot是Firestore的异步监听方法，你传入的回调函数会在数据请求完成后才执行，回调里的return items只会把值返回给onSnapshot本身，不会作为外层getSitesDB函数的返回值
2. 你编写的getSitesDB没有定义外层的return语句，所以调用后默认返回undefined

解决方案 #

1. 改造父组件的getSitesDB，封装为Promise返回 #

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

2. 子组件中通过async/await异步获取返回值 #

useEffect(() => {
  const fetchSitesData = async () => {
    setLoading(true);
    const returnVal = await props.getSitesDB();
    // 此处可对returnVal做后续处理，比如存入state
    setLoading(false);
  }
  fetchSitesData();
  // 可在此处添加组件卸载时的监听清理逻辑，避免内存泄漏
}, []);

额外优化建议 #

如果你只是需要单次获取数据而非持续监听数据变更，可以把onSnapshot替换为get()方法，更符合单次请求的场景，也避免产生冗余的监听事件。

内容的提问来源于stack exchange，提问作者Tharinda Hashen