如何在Supabase中更新对象而非替换？我的历史记录追加代码失效

你当前的代码存在两个核心问题：

1. 前端的history状态可能与数据库中存储的最新历史记录不一致（比如页面刷新、其他端修改数据后），直接用前端状态拼接后更新数据库，会覆盖掉数据库中已有的历史记录。
2. updateHistory函数是直接将传入的historyObj替换数据库的history字段，没有做"追加新记录到原有历史"的操作。

方案一：先拉取最新历史再追加更新 #

修改updateHistory函数，先从数据库获取当前最新的历史记录，将新记录追加到数组头部后再更新数据库：

export const updateHistory = async (id, newHistoryItem) => {
  // 1. 获取数据库中当前的历史记录
  const { data: propertyData, error: fetchError } = await supabase
    .from("property")
    .select("history")
    .eq("id", id)
    .single();

  if (fetchError) {
    console.error(fetchError);
    return;
  }

  // 2. 处理历史记录：若原字段为空则初始化为空数组
  const currentHistory = propertyData.history || [];
  // 3. 将新记录放在数组头部
  const updatedHistory = [newHistoryItem, ...currentHistory];

  // 4. 更新数据库
  const { data, error } = await supabase
    .from("property")
    .update({ history: updatedHistory })
    .eq("id", id);

  if (error) {
    console.error(error);
  }
  return data;
};

同步修改调用逻辑，只需传入单个新历史项，更新后再同步前端状态：

useEffect(() => {
  const tempHistory = {
    column: column,
    field: name,
    previousValue: `${defaultValue}`,
    updatedValue: `${changedValue}`,
    time: new Date().toISOString(),
  };

  updateHistory(propertyId, tempHistory)
    .then(() => {
      // 更新后拉取最新历史同步前端状态
      return supabase.from("property").select("history").eq("id", propertyId).single();
    })
    .then(({ data }) => {
      setHistory(data.history);
    })
    .catch(err => console.error(err));
}, [changedValue, propertyId, column, name, defaultValue]);

方案二：用数据库原生数组操作（更高效） #

如果你的Supabase使用PostgreSQL作为底层数据库，可以直接用array_prepend函数在数据库层面完成"头部追加"操作，无需先查询再更新：

export const updateHistory = async (id, newHistoryItem) => {
  const { data, error } = await supabase
    .from("property")
    .update({ 
      history: supabase.rpc('array_prepend', {
        element: newHistoryItem,
        array: 'history'
      })
    })
    .eq("id", id);

  if (error) {
    console.error(error);
  }
  return data;
};

调用逻辑和方案一的调用部分一致，只需传入单个新历史项即可。注意需确保history字段在数据库中定义为数组类型（如jsonb[]）。

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