React中Supabase插入数据后if(data)判断不生效问题求助

在React组件中使用Supabase向notes_strings表插入数据，数据已成功存入数据库，但代码中的if(error)和if(data)分支均未执行，控制台无日志输出，且if(data)无法将formError重置为null。

代码如下：

import { useState } from "react";
import { supabase } from "../config/supabaseClient";

const Create = () => {
  const [text, setText] = useState("");
  const [formError, setFormError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!text) {
      setFormError("Please add your verse text");
      return;
    }

    const { data, error } = await supabase
      .from("notes_strings")
      .insert([{ text }]);

    if (error) {
      console.log(error);
      setFormError("Please add your verse text");
    }
    if (data) {
      console.log(data);
      setFormError(null);
    }
  };

  return (
    <div className="note create">
      <form onSubmit={handleSubmit}>
        <label htmlFor="text">Enter Verse:</label>
        <textarea
          id="note"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />

        <button>Add Verse</button>

        {formError && <p className="error">{formError}</p>}
      </form>
    </div>
  );
};

export default Create;

问题原因 #

Supabase的insert方法默认不返回插入的数据，因此插入成功时：

• data为null（或空数组，取决于Supabase版本）
• error也为null

这导致两个if分支的条件都不成立，所以控制台无日志输出，setFormError(null)也不会执行。

解决方法 #

有两种可行的修正方式：

方式1：让Supabase返回插入的数据 #

在insert调用后添加.select()，这样插入成功时data会包含插入的记录数组，触发成功分支：

const { data, error } = await supabase
  .from("notes_strings")
  .insert([{ text }])
  .select(); // 添加此方法获取插入的记录

if (error) {
  console.log(error);
  setFormError("Failed to add verse"); // 改为更准确的错误提示
} else {
  console.log(data);
  setFormError(null);
  setText(""); // 可选：清空输入框，提升用户体验
}

方式2：直接通过error判断结果 #

如果不需要返回插入的数据，可仅判断error是否为null来确认操作成功：

const { error } = await supabase.from("notes_strings").insert([{ text }]);

if (error) {
  console.log(error);
  setFormError("Failed to add verse");
} else {
  console.log("Verse added successfully");
  setFormError(null);
  setText(""); // 可选：清空输入框
}

额外说明 #

• 如果你的表开启了行级安全（RLS），确保插入策略允许当前用户写入数据（你已成功插入，此点可忽略）。
• 建议将错误提示改为更具体的内容，避免和空输入的提示混淆，帮助用户区分不同错误场景。

内容的提问来源于stack exchange，提问作者Steve D'Agostino