设置“multiple”时出现错误 Dropdown `value` 必须是一个数组

Question

我遇到了这个错误

**Dropdown `value` must be an array when `multiple` is set.**

我在语义 ui 反应中使用 multiselect dropdown。当我运行我的应用程序出现错误时

设置multiple时下拉菜单value必须是数组

这是我的代码 https://codesandbox.io/s/optimistic-field-56zpm

<RFField
              component={SingleSelectAutoComplete}
              label="I agree to the Terms and Conditions"
              name="dropdown"
            />

API

https://react.semantic-ui.com/modules/dropdown/#types-clearable-multiple

Answer 1

控制台中的错误非常清楚您需要更改的内容。

查看第一条消息：

Dropdown prop "value" is auto controlled. Specify either defaultValue or value, but not both.

由于您使用的是表单管理器 (react-final-form)，字段值由表单组件管理。所以你应该从 Dropdown 组件中删除 defaultValue 属性：

      <Dropdown
        ...
        selection
        options={data}
        defaultValue={[]} // remove this prop

第二个错误：

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

我认为 react-final-form 将未知值初始化为空字符串。因此，您应该在表单的 initialValues 属性中将 "dropdown" 值定义为一个空数组：

      <RFFORM
        initialValues={{
          dropdown: [],
        }}
        onSubmit={onSubmit}

这是一个工作沙箱：https://codesandbox.io/s/great-gould-fepxk

设置“multiple”时出现错误 Dropdown `value` 必须是一个数组

getting error Dropdown `value` must be an array when `multiple` is set

reactjs

semantic-ui

react-final-form

final-form