使用 useSWR 从 Firebase 获取的数据返回 undefined

Question

我正在学习使用 useSWR 从 Firebase 获取数据并使用它来设置状态的课程。但是，当我尝试控制台记录数据时，我得到未定义并且屏幕显示正在加载。这有什么理由吗。我什至复制了讲师使用的完全相同的代码（API 链接除外）。

import { useEffect, useState } from 'react';
import useSWR from 'swr';

function LastSalesPage() {
  const [sales, setSales] = useState();
  // const [isLoading, setIsLoading] = useState(false);

  const { data, error } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json'
  );

  console.log('Data:', data);

  useEffect(() => {
    if (data) {
      const transformedSales = [];

      for (const key in data) {
        transformedSales.push({
          id: key,
          username: data[key].username,
          volume: data[key].volume,
        });
      }

      setSales(transformedSales);
    }
  }, [data]);

  if (error) {
    return <p>Failed to load.</p>;
  }

  if (!data || !sales) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {sales.map((sale) => (
        <li key={sale.id}>
          {sale.username} - ${sale.volume}
        </li>
      ))}
    </ul>
  );
}

export default LastSalesPage;

Answer 1

根据官方文档-

useSWR 钩子接受一个密钥字符串和一个提取函数。 key 是数据的唯一标识符（通常是 API URL），将被传递给 fetcher。 fetcher 可以是任何返回数据的异步函数，你可以使用原生的 fetch 或 Axios 之类的工具。

所以看起来你根本没有在那里传递任何 fetcher。

尝试像这样定义钩子：

const fetcher = (url) => fetch(url).then((res) => res.json());

  const { data, error } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json',
    fetcher
  );

Answer 2

  const { data : userData, error: errorUserData } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json'
  );

还有你的完整文件（工作，由我测试）：

import { useEffect, useState } from 'react';
import useSWR from 'swr';

function LastSalesPage() {
  const [sales, setSales] = useState();
  // const [isLoading, setIsLoading] = useState(false);

  const { data: userData, error: userDataError } = useSWR(
    'https://nextjs-2021-default-rtdb.firebaseio.com/sales.json'
  );



  if (userDataError) {
    return <p>Failed to load.</p>;
  }

  if (!userData) {
    return <p>Loading...</p>;
  }
  if (userData){
  let transformedSales = [];

      for (const key in userData) {
        transformedSales.push({
          id: key,
          username: userData[key].username,
          volume: userData[key].volume,
        });
  }
  console.log(userData, transformedSales)
  let sales = transformedSales
  return (
    <ul>
      {sales.map((sale) => (
        <li key={sale.id}>
          {sale.username} - ${sale.volume}
        </li>
      ))}
    </ul>
  );
  }
}

export default LastSalesPage;

P.S 不要使用 useEffect() 钩子（react 钩子）来获取数据，useSWR 非常适合此目的。

PS (2) 你不需要 fetcher 来获取没有特殊参数的数据，所以只需 = useSWR('/api /路径')

关于fetcher的说明：如果勾选official docs，则fetcher是可选参数。 “这里的 fetcher 是一个异步函数，它接受 SWR 的密钥，并返回数据”——来自here。我无法真正解释为什么您的代码使用 fetcher 可以工作，但我以清晰的逻辑分享了您修改后的代码。