SvelteKit应用无法更新Supabase数据表问题求助

问题场景 #

已成功从Supabase拉取数据并在页面展示，页面设有「编辑」按钮，点击后可将列表项转为输入框修改数据。但点击「保存」后，仅页面数据临时变更，刷新后恢复原状，Supabase数据库未实际更新。

核心问题排查 #

从你的代码里能发现两个关键错误：

1. 编辑按钮未传递firm参数
   按钮点击事件绑定的editTheFirm函数需要接收firm对象作为参数，但当前写法on:click={editTheFirm}没有传递任何参数，导致调用submitToDatabase(firm)时firm为undefined，更新请求的字段值全为空，数据库自然不会有变化。

2. 更新条件匹配错误
   你用.eq('id', lawfirmId)定位要更新的行，但页面判断显示的条件是firm.lawfirmname === lawfirmId，说明lawfirmId实际是律所名称，而非数据库表lawfirm中的id字段。用名称匹配id字段，根本找不到对应记录，所以数据库不会执行更新。

另外还有一个潜在问题：全局的editing变量会影响所有列表项，若data.lawfirm有多条数据，点击编辑会切换所有条目的状态，建议把编辑状态绑定到单个firm对象上。

修正后的代码 #

脚本部分

<script>
    import { page } from '$app/stores';
    import { supabase } from '../../../lib/supabaseClient';
    export let data;

    // 重命名变量，明确其实际是律所名称而非ID
    const lawfirmName = $page.params.lawfirmId;

    // 给每个律所单独绑定编辑状态，避免全局状态干扰
    data.lawfirm.forEach(firm => {
        firm.isEditing = false;
    });

    function editTheFirm(firm) {
        firm.isEditing = !firm.isEditing;
        if (!firm.isEditing) {
            submitToDatabase(firm);
        }
    }
    
    async function submitToDatabase(firm) {
        try {
            const { data, error } = await supabase
                .from('lawfirm')
                .update({
                    clientstatus: firm.clientstatus,
                    websiteurl: firm.websiteurl,
                    address1: firm.address1,
                    address2: firm.address2,
                    city: firm.city,
                    stateregion: firm.stateregion,
                    postalcode: firm.postalcode,
                    country: firm.country,
                    phonenumber: firm.phonenumber,
                    emailaddress: firm.emailaddress,
                    numberofemployees: firm.numberofemployees,
                    description: firm.description
                })
                // 用正确的字段匹配，若表中有唯一ID，建议用firm.id更可靠
                .eq('lawfirmname', lawfirmName);

            if (error) {
                throw error;
            }

            console.log('更新成功:', data);
        } catch (error) {
            console.error('更新失败:', error.message);
        }
    }
</script>

模板部分

<div class="lawFirmBanner">
    <h1>{decodeURIComponent(lawfirmName)}</h1>
</div>

{#each data.lawfirm as firm}
    {#if firm.lawfirmname === lawfirmName}
        <div class="lawFirmInfo">
            <ul class="lawFirmColumns">
                <li>
                    <strong>Client: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.clientstatus} />
                    {:else}
                        {firm.clientstatus}
                    {/if}
                </li>
                <li>
                    <strong>URL: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.websiteurl} />
                    {:else}
                        {firm.websiteurl}
                    {/if}
                </li>
                <li>
                    <strong>Address 1: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.address1} />
                    {:else}
                        {firm.address1}
                    {/if}
                </li>
                <li>
                    <strong>Address 2: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.address2} />
                    {:else}
                        {firm.address2}
                    {/if}
                </li>
                <li>
                    <strong>City: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.city} />
                    {:else}
                        {firm.city}
                    {/if}
                </li>
                <li>
                    <strong>State: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.stateregion} />
                    {:else}
                        {firm.stateregion}
                    {/if}
                </li>
                <li>
                    <strong>Postal Code: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.postalcode} />
                    {:else}
                        {firm.postalcode}
                    {/if}
                </li>
                <li>
                    <strong>Country: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.country} />
                    {:else}
                        {firm.country}
                    {/if}
                </li>
                <li>
                    <strong>Contact: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.phonenumber} />
                    {:else}
                        {firm.phonenumber}
                    {/if}
                </li>
                <li>
                    <strong>Email: </strong>
                    {#if firm.isEditing}
                        <input type="text" bind:value={firm.emailaddress} />
                    {:else}
                        {firm.emailaddress}
                    {/if}
                </li>
                <li>
                    <strong>Employees Count: </strong>
                    {#if firm.isEditing}
                        <input type="number" bind:value={firm.numberofemployees} />
                    {:else}
                        {firm.numberofemployees}
                    {/if}
                </li>
            </ul>
            <p class="paraLeft"><strong>Description: </strong></p>
            {#if firm.isEditing}
                <textarea bind:value={firm.description}></textarea>
            {:else}
                <p>{firm.description}</p>
            {/if}
        </div>
        <div class="editButton">
            <!-- 点击时传递当前firm对象 -->
            <button on:click={() => editTheFirm(firm)} class="editStyle">{firm.isEditing ? 'Save' : 'Edit'}</button>
        </div>
    {/if}
{/each}

额外检查项 #

• 如果lawfirm表有唯一id字段，建议用.eq('id', firm.id)作为更新条件，避免名称重复导致更新错误。
• 检查Supabase的行级安全（RLS）规则，确保当前用户拥有lawfirm表的更新权限，RLS禁止操作也会导致数据库无变化。
• 打开浏览器控制台，查看submitToDatabase函数的日志输出，快速定位是否有其他错误。

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