如何在Yew Rust组件间共享HashMap状态？

核心错误原因 #

1. 状态更新方式错误：UseStateHandle<HashMap<..>>解引用后是不可变引用，无法直接调用insert修改内部HashMap，必须遵循Yew不可变状态更新原则，通过克隆-修改-替换的流程更新状态。
2. 组件传参类型不匹配：Connections组件预期接收HashMap类型，但你传递的是UseStateHandle<HashMap>，导致类型不匹配错误。若需要组件响应状态变化，应让Connections直接接收UseStateHandle类型。

修正后的代码 #

use yew::prelude::*;
use std::collections::HashMap;
use web_sys::Element;

#[derive(Properties, PartialEq)]
struct PaneProps {
    some_prop: String, // 根据实际业务调整属性
}

#[derive(Properties, PartialEq)]
struct ConnectionsProps {
    // 改为接收UseStateHandle，实现状态变更监听
    node_positions: UseStateHandle<HashMap<String, Element>>,
}

#[function_component(Connections)]
pub fn connections(props: &ConnectionsProps) -> Html {
    // 通过*props.node_positions获取最新的节点位置HashMap
    let node_list = props.node_positions.iter().map(|(id, _element)| {
        html! { <div key={id}>{format!("节点: {}", id)}</div> }
    });

    html! {
        <div class="connections-container">
            {for node_list}
            {/* 这里添加连线绘制逻辑 */}
        </div>
    }
}

#[function_component(Pane)]
pub fn pane(PaneProps { some_prop }: &PaneProps) -> Html {
    let other_node_positions = use_state(|| HashMap::new());

    let on_ref_update = {
        let state_clone = other_node_positions.clone(); // 克隆UseStateHandle（本身是Rc，开销极小）
        Callback::from(move |(id, element): (String, Element)| {
            // 1. 克隆当前状态的HashMap
            let mut updated_map = (*state_clone).clone();
            // 2. 修改克隆后的HashMap
            updated_map.insert(id, element);
            // 3. 设置新状态，触发组件重渲染
            state_clone.set(updated_map);
        })
    };

    html! {
        <div class="pane-container">
            <Connections node_positions={other_node_positions.clone()} />
            {/* 渲染需要上报位置的组件，传入回调 */}
            {/* <PositionedComponent on_ref_update={on_ref_update.clone()} /> */}
        </div>
    }
}

关键修改说明 #

• 状态更新逻辑：不再直接修改UseStateHandle内部值，而是克隆当前HashMap实例，修改后通过set方法替换整个状态，符合Yew的状态管理规范。
• Props类型调整：Connections组件的node_positions改为UseStateHandle类型，这样状态更新时组件会自动重新渲染，实时获取最新节点位置。
• Callback捕获优化：直接克隆UseStateHandle（本身基于Rc实现），避免引用捕获带来的生命周期和移动语义问题。

额外说明 #

如果Connections仅需一次性读取位置而非监听变化，可通过(*other_node_positions).clone()传递克隆后的HashMap，但这种方式无法响应后续位置更新，不适用于连线绘制场景。

内容的提问来源于stack exchange，提问作者Dr. Thomas C. King