时间戳

首页 > 解决方案 > 使用 Yew 框架的 Webassembly 未捕获的错误

rust - 使用 Yew 框架的 Webassembly 未捕获的错误

问题描述

我正在使用 Yew 来编写一个主题切换器，通过单击循环不同的主题。这是我的更新功能。它获取存储在共享状态中的当前主题，这取决于主题循环中接下来会发生什么，共享状态中的主题值被设置为它。

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    match msg {
        Msg::ChangeTheme => {
            let theme_cycle: [&str; 3] = ["light", "dark", "rust"];
            let current_theme = self.props.handle.state().theme.clone();
            // eval next theme
            let next_theme = match theme_cycle.iter().position(|x| x == &current_theme) {
                None => theme_cycle[0].to_string(),
                Some(i) => {
                    if i >= (current_theme.len() - 1) {
                        theme_cycle[0].to_string()
                    } else {
                        theme_cycle[i + 1].to_string()
                    }
                },
            };
            // set next theme
            self.props.handle.reduce(move |state| state.theme = next_theme.clone());
            // store it inside localstorage
        },
        Msg::ToggleLangDropdown => self.show_dropdown = !self.show_dropdown,
    };
    true
}

但是，如果共享状态中的主题 val 是“rust”并且我再次单击调用 Msg::ChangeTheme 的按钮，则主题应该设置为“light”，但我的代码会出现恐慌，并且我会在里面得到“Uncaught Error: undefined”浏览器控制台。

标签： rustwebassemblyyew

解决方案

我找到了解决方法；我没有使用数组和访问值，而是尝试执行相同的任务，但只使用迭代器，并确保更新函数不拥有函数本身之外的任何变量的所有权（我真的不知道这是否是不过真的很有必要……）

fn update(&mut self, msg: Self::Message) -> ShouldRender {
    match msg {
        Msg::ChangeTheme => {
            let theme_cycle = ["light".to_string(), "dark".to_string(), "rust".to_string()];
            let current_theme = self.props.handle.state().theme.clone();
            let indexof_current_theme = match theme_cycle.iter().position(|x| x.to_string() == current_theme) {
                None => 0,
                Some(x) => x.clone(),
            };
            let next_theme = match theme_cycle.iter().nth(indexof_current_theme + 1) {
                None => theme_cycle.iter().nth(0).unwrap().clone(),
                Some(x) => x.clone(),
            };
            self.props.handle.reduce(move |state| state.theme = next_theme.to_string());
        },
        Msg::ToggleLangDropdown => self.show_lang_dropdown = !self.show_lang_dropdown,
        Msg::ToggleThemeDropdown => self.show_theme_dropdown = !self.show_theme_dropdown,
    };
    true
}

如果有人知道我在第一次尝试中做错了什么，那仍然会很酷。

推荐阅读