the format!() bug in <a href={format!()}>

yiwufen commented 2 months ago

Describe the bug

let edit_url = create_memo(move |_| format!{"/edit_chapter/{}/{}", novel_name(), chapter_title()});
...
<a href={edit_url} class="p-2 hover:text-blue-400">edit1</a>
<a href={format!("/edit_chapter/{}/{}", novel_name(), chapter_title())} class="p-2 hover:text-blue-400">edit2</a>

cargo leptos in edge

<a href="/edit_chapter/aaa/bbb" class="p-2 hover:text-blue-400">edit1</a>
<a href="/edit_chapter/aaa/" class="p-2 hover:text-blue-400">edit2</a>

Leptos Dependencies

[dependencies]
actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", optional = true, features = ["macros"] }
console_error_panic_hook = "0.1"
http = { version = "1.0.0", optional = true }
leptos = { version = "0.6", features = ["nightly"] }
leptos_meta = { version = "0.6", features = ["nightly"] }
leptos_actix = { version = "0.6", optional = true }
leptos_router = { version = "0.6", features = ["nightly"] }
wasm-bindgen = "=0.2.92"
chrono = { version = "0.4.31", features = ["serde"] }
serde = { version = "1.0.197", features = ["derive"] }
sqlx ={ version = "0.7", features = ["runtime-async-std", "sqlite", "chrono"], optional = true }
uuid = { version = "1.8.0", features = ["v4"], optional = true }

Expected behavior the tag 'a' should be the same.

gbj commented 2 months ago

This doesn't contain a reproducible example so I can't tell for sure. At a glance: edit_url is reactive (it is a memo, so will react to changes in both novel_name and chapter_title), {format!(...)} is not reactive, so that could be one cause of the issue. Otherwise, not sure. If you can provide a reproducible example I'm happy to take a look.

yiwufen commented 2 months ago

这不包含可重复的示例，所以我无法确定。一目了然：是被动的（它是备忘录，所以会对两者的变化做出反应），不是被动的，所以这可能是问题的原因之一。否则，不确定。如果你能提供一个可重复的例子，我很乐意看一看。edit_url``novel_name``chapter_title``{format!(...)}

Thank you. I already know what the problem is, okay this is a reproducible example, Ineed to use closures like href={move || format!("view/{}/{}", param_a(), param_b())}

use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/tests-tag-a.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router>
            <main>
                <Routes>
                    <Route path="" view=ChangePramsB/>
                </Routes>
            </main>
        </Router>
    }
}

/// Renders the home page of your application.
#[component]
pub fn PageOne(param_a: ReadSignal<String>, param_b: ReadSignal<String>) -> impl IntoView {
    // Creates a reactive value to update the button
    let url = create_memo(move |_| format!("view/{}/{}", param_a(), param_b()));
    view! {
        <a href={format!("view/{}/{}", param_a(), param_b())}> test1 </a>
        <a href={url}> test2 </a>
    }
}

#[component]
fn ChangePramsB() -> impl IntoView {
    let (param_a, set_param_a) = create_signal(String::from("aa"));
    let (param_b, set_param_b) = create_signal(String::from(""));

    view! {

        <button on:click={move |_| set_param_b("bbb".to_string())}> "change param b" </button>
        <PageOne param_a=param_a param_b=param_b />

    }
}

leptos-rs / leptos

the format!() bug in <a href={format!()}> #2554