设置"多个"时，下拉列表"值"必须是数组.接收类型:"[对象字符串]&

Question

我收到此错误

设置multiple时，下拉列表value必须是数组。接收类型：[object String]。

这是我的代码 https://codesandbox.io/s/cool-torvalds-lhe9d

我已经提供了一个默认值空白数组。

<Dropdown
{...restProps}
value={value || []}
{...props.input}

Answer 1

您收到错误是因为{...props.input}具有属性value

name: "zones"
value: "" // <--- this is [object String]
type: undefined
onBlur: function () {}
onChange: function () {}
onFocus: function () {}

这是覆盖您之前设置的value属性

<Dropdown
{...restProps}
value={value || []}
{...props.input} // <--- the value here is overwriting the value attribute before it.
clearable
fluid
multiple

因此，要解决此问题，只需将value属性向下移动一步：

<Dropdown
{...restProps}
{...props.input}
value={value || []}
clearable
fluid
multiple

Answer 2

输入的传播意味着根组件(在本例中为 "(的值正在传递到下拉列表组件中。

我已经分叉并修复了。

https://codesandbox.io/s/broken-wildflower-e9t3n

基本上替换以下内容

let { value = [], ...restProps } = props.input;

传播很方便，但有时它会混淆母体。对于只有几个道具的组件，我建议显式传递它们。