如何使用 Rust 和 wasm-bindgen 創建一個閉包，該閉包使用 state 創建另一個閉包？

Question

我正在嘗試創建一個小型 web 應用程序，該應用程序將允許用戶將文件拖放到 window 上。 然后將讀取文件並將其內容連同文件名一起打印到控制台。 此外，文件將被添加到列表中。

JS 中的等效代碼可能類似於：

window.ondragenter = (e) => {
    e.preventDefault();
}
window.ondragover = (e) => {
    e.preventDefault();
}

const allFiles = [];

const dropCallback = (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log("Got", files.length, "files");
  for (let i = 0; i < files.length; i++) {
    const file = files.item(i);
    const fileName = file.name;
    const readCallback = (text) => {
      console.log(fileName, text);
      allFiles.push({fileName, text});
    }
    file.text().then(readCallback);
  }
};

window.ondrop = dropCallback;

當嘗試在 Rust 中執行此操作時，我遇到了外部閉包需要實現FnOnce以將all_files再次移出其 scope 的問題，這破壞了Closure::wrap的預期簽名。 而Closure::once不會成功，因為我需要能夠將多個文件放到 window 上。

這是我沒有運氣嘗試過的代碼：

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
use wasm_bindgen::JsValue;

macro_rules! console_log {
    ($($t:tt)*) => (web_sys::console::log_1(&JsValue::from(format_args!($($t)*).to_string())))
}

struct File {
    name: String,
    contents: String,
}

#[wasm_bindgen]
pub fn main() {
    let mut all_files = Vec::new();

    let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
        event.prevent_default();
        let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
        let drag_event = drag_event_ref.clone();
        match drag_event.data_transfer() {
            None => {}
            Some(data_transfer) => match data_transfer.files() {
                None => {}
                Some(files) => {
                    console_log!("Got {:?} files", files.length());
                    for i in 0..files.length() {
                        if let Some(file) = files.item(i) {
                            let name = file.name();
                            let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
                                let contents = text.as_string().unwrap();
                                console_log!("Contents of {:?} are {:?}", name, contents);

                                all_files.push(File {
                                    name,
                                    contents
                                });
                            }) as Box<dyn FnMut(JsValue)>);

                            file.text().then(&read_callback);

                            read_callback.forget();
                        }
                    }
                }
            },
        }
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // These are just necessary to make sure the drop event is sent
    let drag_enter = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag enter!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    let drag_over = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag over!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // Register all the events on the window
    web_sys::window()
        .and_then(|win| {
            win.set_ondragenter(Some(JsCast::unchecked_from_js_ref(drag_enter.as_ref())));
            win.set_ondragover(Some(JsCast::unchecked_from_js_ref(drag_over.as_ref())));
            win.set_ondrop(Some(JsCast::unchecked_from_js_ref(drop_callback.as_ref())));
            win.document()
        })
        .expect("Could not find window");

    // Make sure our closures outlive this function
    drag_enter.forget();
    drag_over.forget();
    drop_callback.forget();
}

我得到的錯誤是

error[E0525]: expected a closure that implements the `FnMut` trait, but this closure only implements `FnOnce`
  --> src/lib.rs:33:72
   |
33 |   ...                   let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
   |                                                           -        ^^^^^^^^^^^^^^^^^^^^ this closure implements `FnOnce`, not `FnMut`
   |  _________________________________________________________|
   | |
34 | | ...                       let contents = text.as_string().unwrap();
35 | | ...                       console_log!("Contents of {:?} are {:?}", name, contents);
36 | | ...
37 | | ...                       all_files.push(File {
38 | | ...                           name,
   | |                               ---- closure is `FnOnce` because it moves the variable `name` out of its environment
39 | | ...                           contents
40 | | ...                       });
41 | | ...                   }) as Box<dyn FnMut(JsValue)>);
   | |________________________- the requirement to implement `FnMut` derives from here

error[E0525]: expected a closure that implements the `FnMut` trait, but this closure only implements `FnOnce`
  --> src/lib.rs:20:48
   |
20 |       let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
   |                                         -        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ this closure implements `FnOnce`, not `FnMut`
   |  _______________________________________|
   | |
21 | |         event.prevent_default();
22 | |         let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
23 | |         let drag_event = drag_event_ref.clone();
...  |
33 | |                             let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
   | |                                                                        -------------------- closure is `FnOnce` because it moves the variable `all_files` out of its environment
...  |
50 | |         }
51 | |     }) as Box<dyn FnMut(&web_sys::Event)>);
   | |______- the requirement to implement `FnMut` derives from here

error: aborting due to 2 previous errors; 1 warning emitted

For more information about this error, try `rustc --explain E0525`.
error: could not compile `hello_world`.

To learn more, run the command again with --verbose.

在一個更復雜的示例中，我無法以更簡單的形式重現，我得到一個更神秘的錯誤，但我希望它與上述有關：

error[E0277]: expected a `std::ops::FnMut<(&web_sys::Event,)>` closure, found `[closure@src/main.rs:621:52: 649:10 contents:std::option::Option<std::string::String>, drop_proxy:winit::event_loop::EventLoopProxy<CustomEvent>]`
   --> src/main.rs:621:43
    |
621 |           let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
    |  ___________________________________________^
622 | |             event.prevent_default();
623 | |             let drag_event_ref: &web_sys::DragEvent = JsCast::unchecked_from_js_ref(event);
624 | |             let drag_event = drag_event_ref.clone();
...   |
648 | |             }
649 | |         }) as Box<dyn FnMut(&web_sys::Event)>);
    | |__________^ expected an `FnMut<(&web_sys::Event,)>` closure, found `[closure@src/main.rs:621:52: 649:10 contents:std::option::Option<std::string::String>, drop_proxy:winit::event_loop::EventLoopProxy<CustomEvent>]`

我嘗試將all_files變量放入RefCell ，但我仍然遇到類似的錯誤。 我可以使用任何技巧或類型在 Rust 中解決此問題並實現我想要的嗎？

Answer 1

首先，您試圖將name復制到File的多個實例中，但它必須被克隆。 其次，您需要正確確保在閉包想要調用它時all_files可用。 這樣做的一種方法是使用RefCell啟用多個閉包來寫入它，並將其包裝在Rc中以確保只要任何閉包都處於活動狀態，它就保持活動狀態。

嘗試這個：

use std::{cell::RefCell, rc::Rc};
use wasm_bindgen::{prelude::*, JsCast, JsValue};

macro_rules! console_log {
    ($($t:tt)*) => (web_sys::console::log_1(&JsValue::from(format_args!($($t)*).to_string())))
}

struct File {
    name: String,
    contents: String,
}

#[wasm_bindgen]
pub fn main() {
    let all_files = Rc::new(RefCell::new(Vec::new()));

    let drop_callback = Closure::wrap(Box::new(move |event: &web_sys::Event| {
        event.prevent_default();
        let drag_event_ref: &web_sys::DragEvent = event.unchecked_ref();
        let drag_event = drag_event_ref.clone();
        match drag_event.data_transfer() {
            None => {}
            Some(data_transfer) => match data_transfer.files() {
                None => {}
                Some(files) => {
                    console_log!("Got {:?} files", files.length());
                    for i in 0..files.length() {
                        if let Some(file) = files.item(i) {
                            let name = file.name();
                            let all_files_ref = Rc::clone(&all_files);
                            let read_callback = Closure::wrap(Box::new(move |text: JsValue| {
                                let contents = text.as_string().unwrap();
                                console_log!("Contents of {:?} are {:?}", &name, contents);

                                (*all_files_ref).borrow_mut().push(File {
                                    name: name.clone(),
                                    contents,
                                });
                            })
                                as Box<dyn FnMut(JsValue)>);

                            file.text().then(&read_callback);

                            read_callback.forget();
                        }
                    }
                }
            },
        }
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // These are just necessary to make sure the drop event is sent
    let drag_enter = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag enter!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    let drag_over = Closure::wrap(Box::new(|event: &web_sys::Event| {
        event.prevent_default();
        console_log!("Drag over!");
    }) as Box<dyn FnMut(&web_sys::Event)>);

    // Register all the events on the window
    web_sys::window()
        .and_then(|win| {
            win.set_ondragenter(Some(drag_enter.as_ref().unchecked_ref()));
            win.set_ondragover(Some(drag_over.as_ref().unchecked_ref()));
            win.set_ondrop(Some(drop_callback.as_ref().unchecked_ref()));
            win.document()
        })
        .expect("Could not find window");

    // Make sure our closures outlive this function
    drag_enter.forget();
    drag_over.forget();
    drop_callback.forget();
}

請注意，如果您使用多個線程，則可能需要RefCell以外的東西（可能是Mutex ）。 此外，我還將JsCast::unchecked_from_js_ref(x)的使用更改為更規范的x.as_ref().unchecked_ref() 。