Vue使用URLSearchParams传递对象数组报错：对象需有可调用@@iterator属性

错误原因 #

你传入URLSearchParams的是对象数组（比如[{field1: val1}, {field2: val2}]），但URLSearchParams的构造函数不支持这种格式。它仅接受以下几种有效参数：

• 键值对组成的二维数组（如[['key1', 'val1'], ['key2', 'val2']]）
• 单个普通对象（如{key1: 'val1', key2: 'val2'}，现代浏览器支持）
• 标准URL查询字符串（如key1=val1&key2=val2）

解决方案 #

根据你的业务需求，选择以下任意一种修复方式：

方案1：转换为键值对数组（保留重复字段）

如果需要支持同一个字段传递多个值（比如field=val1&field=val2），用这种方式：

advanceSearch(e, field) { 
    this.searchString.push({
        [field] : e
    });

    // 将对象数组转为URLSearchParams支持的键值对数组
    const paramsArray = this.searchString.flatMap(obj => {
        const key = Object.keys(obj)[0];
        return [[key, obj[key]]];
    });
    
    let q = new URLSearchParams(paramsArray).toString();
    
    http.get('projects/search/'+q)
    .then( ( response ) => {
        console.log( response )
    })
    .catch( ( error ) => {

    });
},

方案2：合并为单个对象（覆盖重复字段）

如果字段名不会重复，或者重复字段需要用最新值覆盖旧值，用这种方式：

advanceSearch(e, field) { 
    this.searchString.push({
        [field] : e
    });

    // 把数组里的所有对象合并成一个普通对象
    const paramsObj = this.searchString.reduce((acc, curr) => {
        return {...acc, ...curr};
    }, {});
    
    let q = new URLSearchParams(paramsObj).toString();
    
    http.get('projects/search/'+q)
    .then( ( response ) => {
        console.log( response )
    })
    .catch( ( error ) => {

    });
},

方案3：手动拼接查询字符串（兼容性最高）

如果需要兼容旧版浏览器，手动拼接字符串：

advanceSearch(e, field) { 
    this.searchString.push({
        [field] : e
    });

    // 手动拼接并编码参数
    let q = this.searchString.map(obj => {
        const key = encodeURIComponent(Object.keys(obj)[0]);
        const value = encodeURIComponent(obj[key]);
        return `${key}=${value}`;
    }).join('&');
    
    http.get('projects/search/'+q)
    .then( ( response ) => {
        console.log( response )
    })
    .catch( ( error ) => {

    });
},

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