Firebase 实时数据库获取函数返回未定义（较新的 firebase 版本，2021） - 使用 React Native

Posted 2023-02-16

【中文标题】Firebase 实时数据库获取函数返回未定义（较新的 firebase 版本，2021） - 使用 React Native

【英文标题】：Firebase realtime database get function returns undefined (newer firebase version, 2021) - using React Native

【发布时间】：2022-01-13 14:37:21

【问题描述】：

我正在使用 Firebase 的实时数据库。我已经将所有内容设置为能够访问信息，当我在函数中登录时，它会返回正确的值。

我试过了：

export default function BookCard()
  const [bookListData, setBookListData] = useState([]);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => 
    loadBooks();
  );

  function loadBooks() 
    try 
      const bookArray = getBookList();
      console.log(`Where: BookCard.jsx loadBooks(). Expects: Object with book info. Got: $bookArray`);
      setBookListData(bookArray);
     catch (e) 
      setBookListData(null);
     finally 
      setLoading(false);
    
  

  return (
    <div>
      console.log(`Where: BookCard.jsx return(). Expects: Object with book info. Got: $bookListData`)
      <p>Hello world</p>
      <div>
        isLoading
          ? 'Loading...'
          : bookListData
      </div>
    </div>
  );

并且，在另一个文件中：

const app = initializeApp(firebaseConfig);

const base_url = (hid link here);

const database = getDatabase(app, base_url);

export function getBookList() 
  const reference = ref(database);
  get(child(reference, '/books')).then((snapshot) => 
    if (snapshot.exists()) 
      const result = snapshot.val().results;
      console.log(`Where: api.js getBookList(). Expects: Object with book info. Got:`);
      console.log(result);
      return("result");
     else 
      return 'No data available';
    
  ).catch(() => 
    return 'Error fetching, try again';
  );

如您所见，我在各处放置了一些日志，以尝试查看错误发生在哪里。导入没问题，因为实际上正在调用 getBookList()。这是我在控制台中得到的：

Where: BookCard.jsx loadBooks(). Expects: Object with book info. Got: undefined
Where: BookCard.jsx return(). Expects: Object with book info. Got: undefined
Where: api.js getBookList(). Expects: Object with book info. Got:
(51) […, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …]

所以它在函数内部工作，但“返回”仍然给我未定义。我尝试了一些我见过的变通方法，如下所示：

export function getBookList() 
  const reference = ref(database);
  let desiredData = null;
  fetchData();
  console.log(`Where: api.js getBookList(). Expects: Object with book info. Got:`);
  console.log(desiredData);
  return (desiredData);

  function fetchData()
    get(child(reference, '/books')).then((snapshot) => 
      if (snapshot.exists()) 
        const result = snapshot.val().results;
        console.log(`Where: api.js fetchData(). Expects: Object with book info. Got:`);
        console.log(result);
        desiredData = result;
       else 
        desiredData = 'No data available';
      
    ).catch(() => 
      desiredData = 'Error fetching, try again';
    );
  

控制台返回

Where: api.js getBookList(). Expects: Object with book info. Got:
null
Where: BookCard.jsx loadBooks(). Expects: Object with book info. Got: null
Where: BookCard.jsx return(). Expects: Object with book info. Got: null
Where: api.js fetchData(). Expects: Object with book info. Got:
(51) […, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …, …]

我不知道该怎么做。我见过的每一次解决这个问题的尝试都使用过时的 FireBase 函数等。

【参考方案1】：

我在这里看到的主要问题是 getBookList 没有返回任何内容（您没有返回 get 请求）。所以一个好的开始是用return get(child(reference, '/books')).then((snapshot) => ...替换get(child(reference, '/books')).then((snapshot) => ..

第二个问题似乎是您在 getBookList 函数中返回字符串“result”（而不是包含结果的 const）。所以你也应该用return result;替换return("result");

所以一开始你应该有类似的东西：

export function getBookList() 
  const reference = ref(database);
  return get(child(reference, '/books')).then((snapshot) => 
    if (snapshot.exists()) 
      const result = snapshot.val().results;
      console.log(`Where: api.js getBookList(). Expects: Object with book info. Got:`);
      console.log(result);
      return result;
     else 
      return 'No data available';
    
  ).catch(() => 
    return 'Error fetching, try again';
  );

但我也想知道你为什么使用snapshot.val().results？如果您想要的数据在/books/results 下，您应该像这样请求它（return get(child(reference, '/books/results')).then((snapshot)）。或者您首先需要检查书籍收藏是否存在？比你可以使用

if (snapshot.exists())  
    const result = snapshot.child("results").val(); 
    ...

你可以阅读更多关于child method (of a DataSnapshot)

无论如何，真的很难判断这是否是所有问题（没有工作示例），但我希望这至少应该给你一个方向。

【讨论】：

So you should also replace return("result"); 你是对的，这是我试图检查错误发生位置时遗留下来的，但以前不是那样的。我以snapshot.val().results 的身份进行测试，但我意识到按照你说的做会更好，因为我不需要“/books”中的其余部分。至于实际问题的解决方案（return get）：成功了！我从文档中得到了“get”的东西，但没有完全理解它。非常感谢！

我很高兴它有帮助！如果这也解决了您的问题，请考虑接受答案（它也会让其他人知道这个问题已解决）。谢谢！