如何从yew::UseStateHandle<Vec<T>>获取Vec<T>并修改？

问题场景 #

你在使用Yew的use_state管理Vec<FileList>状态时，尝试通过*cloned_filelist.deref().clone()获取实例，却得到了[FileList]切片而非预期的Vec<FileList>，导致无法正常修改状态。

解决方案 #

UseStateHandle<T>实现了Deref<Target = T>，可以直接解引用获取内部值的引用，克隆后得到可修改的Vec实例。同时Yew的状态更新必须通过set方法完成，不能直接修改原状态，需生成新的Vec后替换旧状态。

修正后的代码示例：

use gloo::console::log;
use web_sys::FileList;
use yew::prelude::*;

// 初始化Vec<FileList>状态
let filelist: UseStateHandle<Vec<FileList>> = use_state(|| vec![]);

// 拖拽事件回调
let on_drop = Callback::from(move |event: DragEvent| {
    event.prevent_default();
    // 安全获取拖拽的文件列表，处理可能的None情况
    if let Some(files) = event.data_transfer().and_then(|dt| dt.files()) {
        // 克隆当前状态的Vec实例
        let mut current_files = (*filelist).clone();
        // 添加新的FileList到Vec中
        current_files.push(files);
        // 通过状态句柄更新状态，触发组件重渲染
        filelist.set(current_files);
    }
});

关键要点 #

• (*filelist).clone()：直接解引用UseStateHandle得到内部的Vec<FileList>，克隆后得到可修改的独立实例。
• 状态更新必须用set：Yew的状态是不可变设计，修改后需通过set传递新的Vec来更新状态并触发组件重新渲染。
• 安全处理Option：拖拽事件的files()方法可能返回None，用if let做模式匹配避免unwrap引发panic。

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