当设置了“multiple”时，出现错误下拉“value”必须是一个数组。接收类型：`[object String]`答案

【问题标题】：getting error Dropdown `value` must be an array when `multiple` is set. Received type: `[object String]`当设置了“multiple”时，出现错误下拉“value”必须是一个数组。接收类型：`[object String]`
【发布时间】：2019-08-25 06:39:41
【问题描述】：

我在使用 multiselect 和 final-form 时遇到此错误。

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

这是我的代码：

https://codesandbox.io/s/cool-torvalds-lhe9d

<Dropdown
        {...props.input}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        defaultValue={[]}
        options={data}
        placeholder="Select values"
      />

有什么更新吗？

【问题讨论】：

沙箱中的代码运行良好..
查看控制台..并检查错误
在example.js 文件中将defaultValue={[]} 替换为value={[]} 时错误消失。看看这是否适合你..
然后用户无法选择值..:(

标签： javascript reactjs semantic-ui-react react-final-form

【解决方案1】：

如果下拉组件无法使用 value，则需要删除 defaultValue 属性并将 value 属性作为 [] 传递。

const SingleSelectAutoComplete = props => {
  const renderError = ({ error, touched }, id) => {
    if (touched && error) {
      return <div id={id}>{error}</div>;
    }
  };
  const {
    input,
    label,
    onSearchChange,
    data,
    meta,
    required,
    onChange,
    helloWorld
  } = props;
  console.log("***********************");
  let { value, ...restProps } = props.input;
  const id = input.name;
  return (
    <div
      className={`field ${meta.error && meta.touched ? " error" : ""} ${
        required ? " required" : ""
      }`}
    >
      <label>{label}</label>
      <Dropdown
        {...restProps}
        value={value || []}
        clearable
        fluid
        multiple
        search
        onChange={(e, data) => {
          return data.value.length > 0
            ? input.onChange(data.value)
            : input.onChange("");
        }}
        onSearchChange={onSearchChange}
        selection
        options={data}
        placeholder="Select values"
      />
      {renderError(meta, `${id}-error-text`)}
    </div>
  );
};

【讨论】：