supabase 的钩子未正确导入

Question

这个项目是 Spotify 的克隆。

挂钩未导入。错误消息显示：React Hook“useSupabaseClient”在函数“useloadArtistImage”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以“use”一词开头。

Github：https://github.com/Jananisankar21419/spotify_2.0 useLoadArtistImages.tsx

import { Artist } from "@/types";
import { useSupabaseClient } from "@supabase/auth-helpers-react";

const useloadArtistImage = (artist: Artist) => {
  const supabaseClient = useSupabaseClient();
  if (!artist) {
    return null;
  }
  const { data: imageData } = supabaseClient.storage
    .from("images")
    .getPublicUrl(artist.picture);
  return imageData.publicUrl;
};

export default useloadArtistImage;

ArtistItem.tsx

"use client";
import useloadArtistImage from "@/hooks/useLoadArtistImages";
import { Artist } from "@/types";
import Image from "next/image";

interface ArtistItemProps {
  data: Artist;
  onClick: (id: string) => void;
}
const ArtistItem: React.FC<ArtistItemProps> = ({ data, onClick }) => {
  const imagePath = useloadArtistImage(data);
   
  const handleClick =(id: string) =>{
console.log(id);
onClick(data.id);
  };
  return (
    <div
      onClick={() => handleClick(data.id)}
      className="relative group flex flex-col items-center justify-center rounded-md overflow-hidden gap-4 bg-neutral-400/5 cursor-pointor hover:bg-neutral-400/5 transition p-2 "
    >
      <div className="relative aspect-square w-full h-full rounded-md overflow-hidden bg-neutral-400/5">
        <Image
          className="object-cover"
          fill
          src={imagePath || "/img/avatar.jpg"}
          alt={data.author}
        />
      </div>
      <p className="truncate w-full font-semibold text-center">
        {data?.author}
      </p>
    </div>
  );
};

export default ArtistItem;

需要一些关于不从 supabase 导入的钩子的帮助

Answer 1

这里有几个错误。

1）。您已将自定义挂钩命名为“useloadArtistImage”：

将该函数重命名为“useLoadArtistImages”以遵循约定 对于以“use”开头的自定义挂钩名称，然后使用 PascalCase 您的自定义钩子描述以大写字母开头 （使用一些东西）。

2）。当你获取数据时，你并不是在等待数据返回：

确保您正在异步处理数据获取。

useLoadArtistImages.tsx：

import { Artist } from "@/types";
import { useSupabaseClient } from "@supabase/auth-helpers-react";

const useLoadArtistImage = (artist: Artist) => {
  const supabaseClient = useSupabaseClient();
  if (!artist) {
    return null;
  }
  
  const fetchData = async () => {
    try {
      const { data: imageData, error } = await supabaseClient.storage
        .from("images")
        .getPublicUrl(artist.picture);

      if (error) {
        // Handle error if needed
        console.error('Error fetching image:', error.message);
        return null;
      }
      
      return imageData.publicUrl;
    } catch (error) {
      console.error('Error fetching image:', error.message);
      return null;
    }
  };

  return fetchData();
};

export default useLoadArtistImage;