useSWR return { null, null } 用于有效请求

Question

我正在尝试在我的 next.js 项目中使用 useSWR 向 Firebase 实时数据库发出请求，但由于某种原因它总是 returns null对于 data 和 error 变量。

import useSWR from 'swr';

const LastSales: NextPage = () => {
  const [sales, setSales] = useState<Sale[]>([]);

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

  useEffect(() => {    
    if (!data) return;

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

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

  if (error) return <p>Failed to load.</p>;
  if (sales.length === 0) return <p>Loading...</p>;

  return <div>Sales List</div>

用 fetch 发出相同的请求工作得很好，但占用了 10 倍的代码行。为什么 data 和 error 都等于 null？

Answer 1

根据 doc，您需要有一个 fetcher 来定义它的调用方式。

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

export default function App() {
  const { data, error } = useSWR(
    "https://api.github.com/repos/vercel/swr",
    fetcher
  );

useSWR return { null, null } 用于有效请求

useSWR return { null, null } for valid request

typescript

reactjs

firebase-realtime-database

next.js

swr