React项目中Supabase API无法返回数据的问题求助

核心错误定位 #

你在UpdateSettingsForm组件中调用自定义Hook时犯了基础错误：调用useSettings时没有加括号。Hook是函数，必须通过useSettings()的方式调用才能返回包含数据的对象，直接写useSettings拿到的是函数本身，解构出来的所有属性自然都是undefined。

修正后的关键代码 #

UpdateSettingsForm 组件修正 #

原来的错误代码：

const {
  isLoading,
  settings: {
    minimumBookingLength,
    maxBookingLength,
    maxsGuestPerBooking,
    breakfastPrice,
  } = {},
} = useSettings;

修正后：

const {
  isLoading,
  settings: [settingsData] = [], // Supabase select返回数组，需取第一个配置行
} = useSettings(); // 补上括号调用Hook

// 解构属性并设置默认值，避免undefined
const {
  minimumBookingLength = 0,
  maxBookingLength = 0,
  maxsGuestPerBooking = 0,
  breakfastPrice = 0,
} = settingsData || {};

其他优化建议 #

1. 恢复API错误处理 #

apiSetting中的错误处理被注释，会导致Supabase请求出错时无法及时排查，建议恢复：

export async function getSettings() {
  let { data, error } = await supabase.from("settings").select("*");

  if (error) {
    console.error("获取设置数据失败:", error);
    throw new Error("获取设置数据失败");
  }

  return data;
}

2. 处理异步加载状态 #

在表单中添加加载状态判断，避免初始渲染显示空值：

if (isLoading) {
  return <div>加载中...</div>;
}

3. 简化Hook数据返回 #

假设settings表仅存一行配置数据，可以在Hook中直接返回第一个元素，减少组件层的解构复杂度：

// useSetting.js 优化
export function useSettings() {
  const {
    data: settings,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["settings"],
    queryFn: getSettings,
  });

  const singleSetting = settings?.[0] || {};

  if (error) {
    console.error("Error fetching settings:", error);
  }

  return { isLoading, error, settings: singleSetting };
}

此时组件可直接解构：

const {
  isLoading,
  settings: {
    minimumBookingLength = 0,
    maxBookingLength = 0,
    maxsGuestPerBooking = 0,
    breakfastPrice = 0,
  } = {},
} = useSettings();

总结 #

最核心的问题是Hook调用缺少括号，这是React Hook的基础使用规则。结合Supabase的返回数据结构调整解构逻辑、恢复错误处理，即可解决表单默认值为undefined的问题。

内容的提问来源于stack exchange，提问作者abdo jama