当设置了 `multiple` 时，下拉菜单 `value` 必须是一个数组。接收类型：`[object String]`

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;

传播很方便，但有时它会让妈妈感到困惑。对于只有几个 props 的组件，我建议显式传递它们。

当设置了 `multiple` 时，下拉菜单 `value` 必须是一个数组。接收类型：`[object String]`

Dropdown `value` must be an array when `multiple` is set. Received type: `[object String]`

javascript

reactjs

react-final-form