Yew框架中`'static`生命周期要求不满足问题求解

问题背景 #

使用Yew框架开发应用时，实现Player列表的激活状态切换功能，遇到生命周期编译错误，编译器提示view函数中的self需要满足'static生命周期约束。

错误信息 #

error[E0759]: `self` has an anonymous lifetime `'_` but it needs to satisfy a `'static` lifetime requirement

相关代码 #

pub struct App {
    state: State,
}

pub struct State {
    pub players: Vec<Player>,
}

#[derive(Debug, Serialize, Deserialize, Clone)]
pub struct Player {
    pub name: String,
    pub score: usize,
    pub is_active: bool,
}

impl Component for App {
//... 省略了create和update的部分样板代码
    fn view(&self, ctx: &Context<Self>) -> Html {
        // 这是组件的"Scope"，可用于向组件发送消息等
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>

                <div id="players">
                {
                    self.state.players.iter().map(|p| {
                        
                        html!{
                        <div  key={p.name.as_str()}>
                        <input
                        type="checkbox"
                        class="toggle"
                        checked={p.is_active}
                        onclick={link.callback(move |_| Msg::Toggle(p.name))}
                    />
                        { format!("Hello, I'am {}!",p.name) }</div>
                    
                    }
                    }).collect::<Html>()
                }
                </div>
            </div>
        }
    }
}

完整诊断信息 #

error[E0759]: `self` has an anonymous lifetime `'_` but it needs to satisfy a `'static` lifetime requirement
   --> src/main.rs:69:40
    |
60  |     fn view(&self, ctx: &Context<Self>) -> Html {
    |             ----- 具有匿名生命周期`'_`的数据...
...
69  |                     self.state.players.iter().map(|p| {
    |                     ------------------ ^^^^
    |                     |
    |                     ...在此处被使用...
...
77  |                         onclick={link.callback(move |_| Msg::Toggle(p.name))}
    |                                       -------- ...且要求其生命周期与`'static`一样长
    |
note: `'static`生命周期要求由此约束引入
   --> /Users/benny.gaechter/.cargo/registry/src/github.com-1ecc6299db9ec823/yew-0.20.0/src/html/component/scope.rs:144:26
    |
144 |         F: Fn(IN) -> M + 'static,
    |                          ^^^^^^^

问题根源 #

Yew的link.callback要求传入的闭包必须满足'static生命周期，因为回调可能在组件实例被销毁后才被触发（比如用户延迟点击），所以闭包不能持有任何非'static的引用。

当前代码中，iter()遍历players得到的是Player的引用，闭包中捕获的p.name是该引用的一部分，其生命周期绑定到self（匿名生命周期'_），不满足'static要求，因此触发编译错误。

解决方法 #

方法1：克隆Player的名称 #

通过克隆p.name，让闭包持有拥有所有权的String，不再依赖self的生命周期：

fn view(&self, ctx: &Context<Self>) -> Html {
    let link = ctx.link();
    html! {
        <div>
            <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>

            <div id="players">
            {
                self.state.players.iter().map(|p| {
                    // 克隆name，转移所有权到闭包
                    let player_name = p.name.clone();
                    html!{
                        <div key={p.name.as_str()}>
                            <input
                                type="checkbox"
                                class="toggle"
                                checked={p.is_active}
                                onclick={link.callback(move |_| Msg::Toggle(player_name))}
                            />
                            { format!("Hello, I'am {}!", p.name) }
                        </div>
                    }
                }).collect::<Html>()
            }
            </div>
        </div>
    }
}

方法2：传递Player的索引 #

如果不想克隆字符串，可以传递Player在列表中的索引，在update方法中通过索引修改状态：

首先修改消息枚举：

enum Msg {
    AddOne,
    Toggle(usize), // 改为接收索引
}

然后修改view中的遍历逻辑：

fn view(&self, ctx: &Context<Self>) -> Html {
    let link = ctx.link();
    html! {
        <div>
            <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>

            <div id="players">
            {
                // 使用enumerate获取索引和Player引用
                self.state.players.iter().enumerate().map(|(idx, p)| {
                    html!{
                        <div key={p.name.as_str()}>
                            <input
                                type="checkbox"
                                class="toggle"
                                checked={p.is_active}
                                onclick={link.callback(move |_| Msg::Toggle(idx))}
                            />
                            { format!("Hello, I'am {}!", p.name) }
                        </div>
                    }
                }).collect::<Html>()
            }
            </div>
        </div>
    }
}

最后在update方法中处理索引：

fn update(&mut self, ctx: &Context<Self>, msg: Msg) -> bool {
    match msg {
        Msg::AddOne => {
            // 原有逻辑
            true
        }
        Msg::Toggle(idx) => {
            // 通过索引找到Player并切换状态
            if let Some(player) = self.state.players.get_mut(idx) {
                player.is_active = !player.is_active;
            }
            true
        }
    }
}

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