[Need Help] Encounter Rendering Error

[rabbit19981023]

Hi, I found this excellent rust fullstack framework these days and really enjoy it, great job Dioxus teams!

But I encounter some problems I can't figure why and how to fix it:

• assume there are multiple todo items in UI.
• whatever I delete which one, always the "last one" would be deleted "in the UI"
• I tried to log all todo items after deleting, the data is correct, but in UI it renders wrong

Here's my snippet code:

static TODOS: GlobalSignal<Vec<Todo>> = GlobalSignal::new(Vec::new);

#[component]
pub fn Todos() -> Element {
    let todos = TODOS.read();
    let resource = use_resource(|| async {
        match get_all_todos().await {
            Ok(todos) => *TODOS.write() = todos,
            Err(err) => tracing::error!("get all todos error: {err}"),
        }
    });
    let result = resource.read();

    match *result {
        Some(_) if !todos.is_empty() => {
            rsx! {
                for todo in &*todos {
                    // after TODOS state are updated, log all todo items
                    // the data is correct, but in UI it renders wrong
                    { tracing::info!("Todo: {todo:?}") }

                    Todo { todo: todo.clone() }
                }
            }
        }
        _ => rsx! { "No Todos Yet" },
    }
}

fn Todo(todo: Todo) -> Element {
    let mut title = use_signal(|| todo.title);
    let mut completed = use_signal(|| todo.completed.unwrap_or(false));

    rsx! {
        div {
            input {
                name: "completed",
                r#type: "checkbox",
                checked: "{completed}",
                oninput: move |event| {
                    if let Ok(as_bool) = event.value().parse() {
                        completed.set(as_bool);
                    }
                }
            }
            input {
                name: "title",
                value: "{title}",
                oninput: move |event| title.set(event.value())
            }
            button {
                onclick: move |_| async move {
                    match delete_todo(todo.id).await {
                        Ok(_) => TODOS.write().retain(|t| t.id != todo.id),
                        Err(err) => tracing::error!("delete todo error: {err}"),
                    }
                },
                "delete"
            }
        }
    }
}

[rabbit19981023]

oops, I just missed key attribute, it works pretty good now!

rsx! {
    for todo in &*todos {
        // [Wrong]
        Todo { todo: todo.clone() }

        // [Correct]
        Todo { key: "{todo.id}", todo: todo.clone() }
    }
}