如何使用max函数比较Dioxus的use_state以防止数值低于1？

核心问题分析 #

你不需要为UseState<i32>实现PartialOrd和Ord——这不仅违反Rust的孤儿规则（无法为外部 crate 的类型实现外部 trait），而且完全没必要。UseState是包裹状态的容器，你需要操作的是它内部的i32值，而非容器本身。

你的代码里几个关键错误：

• 错误尝试实现UseState<i32>的排序 trait，这会直接编译失败
• index = max(&num.try_into(), &val.try_into())逻辑混乱，try_into完全多余，且没有正确操作状态值
• 没有正确获取UseState内部的数值进行计算

修正后的代码 #

use dioxus::{events::*, prelude::*};
use log::{info, LevelFilter};
use std::cmp::max;

/**
 * Specify <link data-trunk rel="copy-dir" href="src/assets" />
 * in the index.html to copy the files!!
 *
 * You'll see them in the dist directory!
 */

fn main() {
    dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
    dioxus::web::launch(app);
}

fn app(cx: Scope) -> Element {
    let mut index = use_state(&cx, || 1);
    
    let change_evt = move |evt: KeyboardEvent| match evt.key.as_str() {
        "ArrowRight" => index += 1,
        // 先获取当前索引值，减1后和1取max，确保不低于1
        "ArrowLeft" => index.set(max(*index.get() - 1, 1)),
        _ => {}
    };

    let url = format!("/assets/manga/one_piece/1042/0{}.jpg", index);
    cx.render(rsx!(
        img {
            src: "{url}",
        }
        div {
            class: "display",
            onkeydown: change_evt,
            // 给div加上tabindex才能捕获键盘事件
            tabindex: "0",
            button {
                class: "but",
                onclick: move |evt| {
                    println!("{evt:?}");
                    info!("{evt:?}");
                },
                "Press me!"
            },
        },
    ))
}

关键修改说明 #

1. 移除无效的trait实现：删掉PartialOrd和Ord的实现代码，这部分完全不需要。
2. 正确操作状态值：
   • *index.get()获取UseState内部的i32值（get()返回的是引用，解引用后得到具体数值）
   • 计算max(*index.get() - 1, 1)确保索引减1后不会低于1
   • 用index.set(...)方法更新状态（Dioxus 0.2中UseState也支持直接赋值index = max(...)，因为它实现了DerefMut）
3. 修复键盘事件捕获：给div加上tabindex: "0"，否则它无法获取焦点，也就不会触发onkeydown事件。

Cargo.toml 无需修改 #

你的依赖配置是正确的，保持原样即可。

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