Svelte中router.reload无法每次更新书签数据问题求助

核心问题排查 #

1. 控制器查询逻辑错误：deleteBookmark方法使用find()查询复合条件记录，仅当表主键为ACCOUNT_ID+BOOKMARK_ID时才有效，多数情况下会返回null导致删除失败，接口无响应，进而router.reload()不执行。
2. 按钮重复点击事件：按钮绑定了两个on:click，一个触发接口请求，另一个直接翻转isChecked状态，导致UI先显示错误状态，且接口失败时状态无法回滚。
3. 组件数据未实时同步：BookmarkButton中bookmarks变量未订阅$page.props变化，无法自动感知页面刷新后的最新数据。

修复步骤及代码修改 #

1. 修复Laravel控制器逻辑 #

修改BookmarkController.php，确保正确查询并操作书签记录，同时返回标准响应：

public function deleteBookmark($id)
{
    $bookmark = AccountHasBookmarks::where([
        'ACCOUNT_ID' => request()->user()->ACCOUNT_ID,
        'BOOKMARK_ID' => $id
    ])->first();
    
    if ($bookmark) {
        $bookmark->delete();
    }
    
    return response()->noContent();
}

public function createBookmark($id)
{
    AccountHasBookmarks::create([
        'ACCOUNT_ID' => request()->user()->ACCOUNT_ID,
        'BOOKMARK_ID' => $id
    ]);
    
    return response()->noContent();
}

2. 修复BookmarkButton组件 #

移除冗余点击事件，订阅页面props变化，添加异步错误处理：

<script>
    import { page, router } from '@inertiajs/svelte';
    import axios from 'axios';
    export let checkId;

    // 订阅page props变化，确保书签数据实时更新
    $: bookmarks = $page.props.bookmarks;
    $: isChecked = bookmarks?.find(bookmark => bookmark.BOOKMARK_ID == checkId);

    let handleBookmark = async () => {
        try {
            if (isChecked) {
                await axios.post('/bookmarks/delete/' + checkId);
            } else {
                await axios.post('/bookmarks/' + checkId);
            }
            // 确保接口请求完成后再刷新页面
            await router.reload();
        } catch (error) {
            console.error('书签操作失败:', error);
        }
    }

    let isHovering = false;
</script>

{#if $page.props.auth.user}
    <button 
        on:click={handleBookmark} 
        class="tw-py-0.5 tw-px-3 tw-rounded-3xl tw-bg-yellow-400 tw-text-black"
        on:mouseover={() => isHovering = true}
        on:mouseout={() => isHovering = false}
    >
        {#if isChecked}
            <i class={isHovering ? 'bi bi-bookmark' : 'bi bi-bookmark-fill'}></i>
        {:else}
            <i class={isHovering ? 'bi bi-bookmark-fill' : 'bi bi-bookmark'}></i>
        {/if}
    </button>
{/if}

3. 优化Bookmarks页面组件 #

订阅$page.props.bookmarks变化，确保列表数据实时更新：

<script>
    import Layout from "../Shared/Layout.svelte";
    import EventListItem from "../Shared/EventListItem.svelte";
    import FacilityListItem from "../Shared/FacilityListItem.svelte";
    import { page } from '@inertiajs/svelte';

    $: bookmarks = $page.props.bookmarks;
    $: events = bookmarks.filter(bookmark => bookmark.event !== null).map(bookmark => bookmark.event);
    $: facilities = bookmarks.filter(bookmark => bookmark.facility !== null).map(bookmark => bookmark.facility);
</script>

<Layout>
    {#each events as event}
        <EventListItem event={event}/>
    {/each}
    {#each facilities as facility}
        <FacilityListItem facility={facility}/>
    {/each}
</Layout>

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