当我尝试发布产品时，我得到colors: [object object]，如何解决这个问题?

Question

我正在使用react-colors，我试图发布一个产品，但我得到的响应字段是color: [object Object].

这是我在产品模型中的颜色:color: { type: Array },

这是我的新产品页面。在JSX中，我处理表单submit:

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"

这没关系。当我发布我的所有字段都是好的，只有colors: [object Object]

这是我的color in form:

<Form.Group className='mb-3'>
<Form.Label>Product Color</Form.Label>
{colors.length > 0 && <h1>colors list</h1>}
{colors.length > 0 &&
colors.map((color, i) => (
<div
className='p-3 me-2 rounded d-inline-block'
key={color.i}
style={{ background: color.color }}
onClick={() => deleteColor(color)}
></div>
))}
<TwitterPicker onChangeComplete={saveColors} />
</Form.Group>

如何解决这个问题

Answer 1

正如我所看到的，你的颜色是一个对象数组，所以你应该在FormData中以适当的方式发送它们。

1. 使用JSON。字符串化并在后端处理字符串数据:

myForm.append('color', JSON.stringify(colors));

2. 以数组形式发送到FormData:

for (let i = 0; i < colors.length; i++) {
myForm.append('colors[]', colors[i]);
}