React调用Firebase RTDB封装方法返回undefined问题求助

问题根源 #

你的FirebaseService异步函数没有显式返回Firebase请求的处理结果，所以外部调用时拿到的默认返回值就是undefined。你在.then()里的return formattedResponse只是返回给了Promise链本身，没有作为整个FirebaseService函数的返回值传递出去。

修复步骤 #

1. 修正FirebaseService的返回逻辑 #

同时补充空数据兼容，避免Firebase返回空值时forEach调用报错：

import {db} from './firebase'
const formatMarketData = (data) =>{
  let formattedData = [];
  // 先判断data是否存在再遍历
  data && data.forEach(item=>{
    const formattedItem = {
        ...item
    }
    formattedData.push(formattedItem);
  });
  return formattedData;
}
export const FirebaseService = async (id) => {
  id=id.replace(/['"]+/g, "");
  const historyKey="/coins/0/"+id
  // 这里加return把Promise的处理结果返回出去
  return await db.ref(historyKey)
    .once('value')
    .then(snapshot => {
      const data = snapshot.val();
      const formattedResponse= formatMarketData(data);
      console.log(formattedResponse)
      return formattedResponse
    });
};

2. 补充useEffect依赖项 #

你当前的useEffect依赖数组为空，只会在组件首次挂载时触发拉取，如果组件挂载后id prop发生变化，不会重新请求数据，建议把id加入依赖数组：

import React from 'react'
import { useState,useEffect } from 'react'
import { FirebaseService } from '../../Services/FirebaseService'
const NewList = ({id}) => {
  const [data,setData] = useState([])
  useEffect(()=>{
    console.log(id)
    const fetchMarketData = async () =>{
      const marketData =  await FirebaseService(id);
      setData(marketData);
    }
    if(id) fetchMarketData(); // 可选：id存在时才发起请求
    return () => {
    }
  },[id]) // 把id加入依赖数组
  return (
    <div>
      {/* 你初始值设的是[]，所以不需要判断undefined，直接判断长度即可 */}
       {data.length>0 ? data.map((d,idx)=><p key={idx}>{d.id}</p>)
                        :<p>no data yet</p>}
    </div>
  )
}

export default NewList

其他优化建议 #

你现在同时用了async/await和.then()两种异步写法，风格不统一，可以改成纯async/await的写法更易读：

export const FirebaseService = async (id) => {
  id=id.replace(/['"]+/g, "");
  const historyKey="/coins/0/"+id
  const snapshot = await db.ref(historyKey).once('value')
  const data = snapshot.val();
  const formattedResponse= formatMarketData(data);
  console.log(formattedResponse)
  return formattedResponse
};

内容的提问来源于stack exchange，提问作者alper yolcu