Yew:嵌套回调的困难

Question

我正在尝试做一些我觉得非常基本的事情:我有一个下拉列表，我希望该下拉列表的onchange事件能够使程序根据用户的输入从后端获取一些数据。(然后，你知道，根据用户选择的第一件事，给用户更多的选择。真的很简单，似乎我应该能找到一种简单的方法来做到这一点。)

这个最小(失败)示例的完整代码位于：https://github.com/djmcmath/broken-yew

但是，相关的位(不正确的行为)如下：

• 视图函数愉快地呈现一个迭代列表。我传入一个回调，所以它知道如何处理"onchange“事件，
• 回调被执行，这让我非常高兴。但它并没有调用Msg::GetData。这是编译的，这是好的，但它不工作，这是不太好的。

我很惭愧地承认，我花了好几个星期的业余时间和这个做斗争。我认为这与范围和寿命有关。我认为，我做这个编译的方式--通过克隆上下文并使用“移动”将其与我需要的实际上下文断开连接。但是我在例子和引用中发现的关于主题的每一个变化都会抱怨范围或生命周期。

提前谢谢你的帮助。

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool { 
        match msg {
            Msg::GetData(value) => {
                log::info!("Start 'fetch' with user-selected value: {}", value);
                ctx.link().send_future(async {
                    match fetch_markdown("url_shortened_for_clarity").await {
                        Ok(md) => Msg::SetMarkdownFetchState(FetchState::Success(md)),
                        Err(err) => Msg::SetMarkdownFetchState(FetchState::Failed(err)),
                    }
                });
                false
            },
            Msg::SetMarkdownFetchState(fetch_state) => {
                let mut wr = WebReturn { term_id: 0, dow: 0, dep_time_num: 0 };
                match fetch_state {
                    FetchState::Success(s) => { wr = serde_json::from_str(&s).expect(&format!("Poorly formatted JSON! {}", s).to_string()); },
                    FetchState::Failed(f) => { log::info!("Fetch failed: {}", f); },
                    FetchState::NotFetching => {},
                    FetchState::Fetching => {}
                };
            
                log::info!("term_id (3) : {}, dep_time_num (12000) : {}, and dow (3) : {}", wr.term_id, wr.dep_time_num, wr.dow);
                true
            }
        }
    }

    fn view(&self, ctx:&Context<Self>) -> Html {
        let ctx_link = ctx.link().clone();
        let my_callback: Callback<String> = Callback::from(move |value: String| {
            let val_as_num = value.parse::<i32>().unwrap_or(0);
            log::info!("Returned value: {}", val_as_num);
            ctx_link.callback(|val_as_num: i32| Msg::GetData(val_as_num));
        });
        
        html! {
            <div>
                { self.render_list(&self.props.term_list, my_callback) }
            </div>
        }
    }

Answer 1

这一行不对组件进行“回调”，它会创建回调，然后不会调用它：

ctx_link.callback(|val_as_num: i32| Msg::GetData(val_as_num));

您需要在回调中调用.send_message()，或者更好的是使用.callback()创建原始回调。

let my_callback = ctx_link.callback(|value: String| {
    let val_as_num = value.parse::<i32>().unwrap_or(0);
    log::info!("Returned value: {}", val_as_num);
    Msg::GetData(val_as_num)
});