如何消除Leptos中“响应式跟踪上下文外访问信号”警告

问题描述 #

我在Leptos中实现了一个修改外部API数据的异步Action（POST请求），请求完成后需要重新获取API数据以更新视图。但在Action内调用my_resource.refetch()时，控制台出现如下警告：

At
.../.cargo/registry/src/github.com-1ecc6299db9ec823/leptos_reactive-0.3.0/src/resource.rs:910:25,
you access a signal or memo (defined at
.../.cargo/registry/src/github.com-1ecc6299db9ec823/leptos_reactive-0.3.0/src/resource.rs:339:18)
outside a reactive tracking context. This might mean your app is not
responding to changes in signal values in the way you expect.

复现代码如下：

use std::sync::atomic::{AtomicUsize, Ordering};

use leptos::*;

/// 模拟外部API数据
static EXTERNAL_DATA: AtomicUsize = AtomicUsize::new(1);

/// 模拟修改外部API数据的异步操作
pub async fn alter_external_data() {
    EXTERNAL_DATA.fetch_add(1, Ordering::SeqCst); // 实际应为异步请求
}

/// 模拟获取外部API数据的异步操作
pub async fn fetch_external_data(n: i32) -> String {
    n.to_string().repeat(EXTERNAL_DATA.load(Ordering::SeqCst)) // 实际应为异步请求
}

#[component()]
pub fn App(cx: Scope) -> impl IntoView {
    let (read_number, set_number) = create_signal(cx, 1);

    // 依赖read_number的资源，同时需要在按钮点击后刷新以反映外部数据变更
    let async_data = create_local_resource(cx, read_number, |n| async move {
        fetch_external_data(n).await
    });

    // 修改外部数据后重新获取资源的Action
    let alter_external_data_action = create_action(cx, move |_: &()| async move {
        alter_external_data().await;
        async_data.refetch(); // 此处触发警告
    });

    view! { cx,
        <p>
            "Fetched data: "
            {move || async_data.read(cx)}
        </p>

        <p>
            "N = "
            <input type="number"
                prop:value=read_number
                on:change=move |ev| set_number(event_target_value(&ev).parse().unwrap())
            />
        </p>

        <p>
            <button on:click=move |_| alter_external_data_action.dispatch(())>
                "Alter external data"
            </button>
        </p>
    }
}

fn main() {
    mount_to_body(|cx| view! { cx, <App/> })
}

警告原因 #

Action的异步处理闭包运行在响应式追踪上下文之外，而refetch()内部会访问Resource的内部信号，这些信号需要在响应式上下文中才能被正确追踪，因此触发了警告。

解决方案 #

方案1：显式在响应式上下文中执行refetch #

使用Scope的run_in_scope方法，将async_data.refetch()包裹在当前组件的响应式上下文中执行，确保信号访问处于正确的追踪环境：

let alter_external_data_action = create_action(cx, move |_: &()| {
    let cx = cx.clone();
    let async_data = async_data.clone();
    async move {
        alter_external_data().await;
        // 将refetch操作放回响应式上下文
        cx.run_in_scope(|_| {
            async_data.refetch();
        });
    }
});

方案2：用响应式信号触发资源刷新（更符合Leptos范式） #

创建一个专门的触发信号，将其加入Resource的依赖列表，当需要刷新时更新该信号，让Resource自动重新获取数据，完全避免手动调用refetch：

#[component()]
pub fn App(cx: Scope) -> impl IntoView {
    let (read_number, set_number) = create_signal(cx, 1);
    // 创建刷新触发信号，每次更新都会触发资源重新获取
    let (trigger_refetch, set_trigger_refetch) = create_signal(cx, 0);

    // 将触发信号加入资源依赖
    let async_data = create_local_resource(cx, move || (read_number.get(), trigger_refetch.get()), |(n, _)| async move {
        fetch_external_data(n).await
    });

    let alter_external_data_action = create_action(cx, move |_: &()| async move {
        alter_external_data().await;
        // 更新触发信号，触发资源自动刷新
        set_trigger_refetch(|prev| prev + 1);
    });

    // 视图部分保持不变
    view! { cx,
        <p>
            "Fetched data: "
            {move || async_data.read(cx)}
        </p>

        <p>
            "N = "
            <input type="number"
                prop:value=read_number
                on:change=move |ev| set_number(event_target_value(&ev).parse().unwrap())
            />
        </p>

        <p>
            <button on:click=move |_| alter_external_data_action.dispatch(())>
                "Alter external data"
            </button>
        </p>
    }
}

方案对比 #

• 方案1适合快速修复现有代码，直接解决警告问题；
• 方案2更贴合Leptos的响应式设计理念，通过信号驱动资源刷新，逻辑更清晰，也避免了手动操作资源的潜在问题。

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