使用react-colors发布产品时color字段显示[object Object]的解决方法

问题背景 #

使用react-colors开发产品发布功能，提交表单后其他字段正常，仅color字段显示color: [object Object]。相关信息如下：

• 产品模型color字段定义：color: { type: Array },
• 提交处理代码：

const handleSubmit = e => {
    e.preventDefault();

    const myForm = new FormData();

    myForm.set('name', name);
    myForm.set('price', price);
    myForm.set('description', description);
    myForm.set('quantity', quantity);
    myForm.set('category', category);
    myForm.set('size', size);
    myForm.set('color', colors); // 问题核心代码

    images.forEach(image => {
      myForm.append('images', image);
    });
    dispatch(createProduct(myForm));
};

• 颜色状态保存函数：

const saveColors = color => {
    const filtered = colors.filter(clr => clr.color !== color.hex);
    setColors([...filtered, { color: color.hex }]);
};

• console.log(colors)输出：

Array [ {…} ] ​   0: Object { color: "#fcb900" } ​​ color: "#fcb900"

问题原因 #

FormData仅支持存储字符串或Blob类型数据，直接传入对象数组colors时，会被自动调用toString()方法，转成[object Object]这个无效字符串，导致后端接收到错误值。

解决方案 #

方案1：将对象数组转为JSON字符串存入FormData #

修改提交代码中设置color的行，把数组转成JSON字符串：

// 替换原myForm.set('color', colors)
myForm.set('color', JSON.stringify(colors));

同时后端需要将接收到的JSON字符串解析回数组对象，以Node.js/Express为例：

// 后端处理逻辑
const color = JSON.parse(req.body.color);
// 后续存入数据库等操作

方案2：转为纯颜色值数组（如果后端期望格式为纯hex数组） #

如果后端不需要对象结构，只需要颜色值，可以先把数组映射为纯hex值再转JSON：

const colorHexList = colors.map(item => item.color);
myForm.set('color', JSON.stringify(colorHexList));

后端解析后得到的就是["#fcb900"]这类纯颜色值数组。

内容的提问来源于stack exchange，提问作者Uros Dioda Rakic