ソースを参照

nonreactive examples for hooks were not compilable as written (#2337)

* nonreactive examples for hooks were not compilable as written

* add example demonstrating the correct usage of use_resource w router

* switch to readonlysignal in the router resource example

* fix readonlysignal name

---------

Co-authored-by: Evan Almloff <evanalmloff@gmail.com>
Chris Rogus 1 年間 前
コミット
7ee3dc41fc
1 ファイル変更65 行追加0 行削除
  1. 65 0
      examples/router_resource.rs

+ 65 - 0
examples/router_resource.rs

@@ -0,0 +1,65 @@
+//! Example: Updating components with use_resource
+//! -----------------
+//!
+//! This example shows how to use use_reactive to update a component properly
+//! when linking to it from the same component, when using use_resource
+
+use dioxus::prelude::*;
+
+#[derive(Clone, Routable, Debug, PartialEq)]
+enum Route {
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        Router::<Route> {}
+    }
+}
+
+#[component]
+fn Blog(id: ReadOnlySignal<i32>) -> Element {
+    async fn future(n: i32) -> i32 {
+        n
+    }
+
+    // if you use the naive approach, the "Blog post {id}" below will never update when clicking links!
+    // let res = use_resource(move || future(id));
+
+    // the use_reactive hook is required to properly update when clicking links to this component, from this component
+    let res = use_resource(move || future(id()));
+
+    match res() {
+        Some(id) => rsx! {
+            div {
+                "Blog post {id}"
+            }
+            for i in 0..10 {
+                div {
+                    Link { to: Route::Blog { id: i }, "Go to Blog {i}" }
+                }
+            }
+        },
+        None => rsx! {},
+    }
+}
+
+#[component]
+fn Home() -> Element {
+    rsx! {
+        Link {
+            to: Route::Blog {
+                id: 0
+            },
+            "Go to blog"
+        }
+    }
+}