Tauri 中如何正确将 JavaScript Map 传递给 Rust 后端-js教程-PHP中文网

Tauri 的 invoke 不支持直接序列化 JavaScript Map，需先转换为普通对象（Object.fromEntries([...map.entries()])），Rust 端才能正确接收并反序列化为 HashMap。

tauri 的 `invoke` 不支持直接序列化 javascript `map`，需先转换为普通对象（`object.fromentries([...map.entries()])`），rust 端才能正确接收并反序列化为 `hashmap`。

在 Tauri 应用中，前端 JavaScript 与后端 Rust 之间的数据通信依赖于 JSON 序列化。而 JavaScript 的 Map 对象不是 JSON 可序列化的原生类型——JSON.stringify(new Map([['a', 1]])) 会返回 {}，导致数据丢失。这正是你遇到 items 在 Rust 端为空 {} 的根本原因。

✅ 正确做法是：在调用 invoke 前，将 Map 显式转换为标准 JavaScript 对象（plain object），即键值对结构的 { "key1": value1, "key2": value2 }。Rust 的 serde_json 可无缝将其反序列化为 HashMap。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 前端处理：Map ↔ Object 双向转换

// 工具函数：Map → Plain Object（用于发送）
const mapToObj = <k extends string number v>(map: Map<k v>): Record<k v> => 
  Object.fromEntries(map.entries()) as Record<k v>;

// 工具函数：Plain Object → Map（用于接收响应或本地复用）
const objToMap = <k extends string number v>(obj: Record<k v>): Map<k v> => 
  new Map(Object.entries(obj) as [K, V][]);

// 预处理提交数据
const serializableDetails = (details: any) => ({
  ...details,
  items: mapToObj(details.items) // 关键：转换 Map
});</k></k></k></k></k></k></k>

✅ 前端调用示例（React + TypeScript）

async function handleSubmit(e: React.FormEvent) {
  e.preventDefault();
  console.log('原始数据:', details); // Map(1) {'3' => 1}

  try {
    const result = await invoke<boolean>('submit_new_customer', {
      details: serializableDetails(details) // ← 转换后传入
    });
    console.log('提交成功:', result);
  } catch (error) {
    console.error('提交失败:', error);
  }
}</boolean>

✅ Rust 后端：保持原有结构（无需修改）

use std::collections::HashMap;
use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize, Debug)]
struct NewCustomerInput {
    name: String,
    country: String,
    address: Option<string>,
    items: HashMap<string usize>, // ✅ 完全兼容 JSON object → HashMap
}

#[tauri::command]
fn submit_new_customer(details: NewCustomerInput) -> Result {
    println!("收到数据: {:?}", details);
    // 输出示例: items: {"3": 1} → 自动映射为 HashMap{"3" => 1}
    Ok(())
}</string></string>

⚠️ 注意事项

❌ 不要尝试在 JS 中直接 JSON.stringify(map) 或 invoke(..., { items: map }) —— Map 会被忽略；
✅ 所有键必须为字符串（Map），因 JSON object 的 key 强制转为字符串，Map 的数字 key 会被序列化为字符串（如 42 → "42"），Rust 端仍可正常接收；
? 若需在 Rust 返回数据中携带 HashMap 到前端，serde 会自动转为 JS object，前端可用 objToMap() 还原为 Map；
? 调试建议：在 invoke 前 console.log(JSON.stringify(serializableDetails(details)))，确认 items 已变为 { "3": 1 } 形式。

通过这一标准化转换，即可在 Tauri 应用中安全、可靠地跨语言传递键值集合数据。