reactjs - 设置“multiple”时，出现错误下拉“value”必须是一个数组

Question

我收到此错误

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

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

设置时下拉列表value必须是一个数组multiple。

这是我的代码 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

标签： reactjssemantic-uireact-final-formfinal-form

Answer 1

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

查看第一条消息：

下拉道具“值”是自动控制的。指定 defaultValue 或 value，但不能同时指定两者。

由于您使用的是表单管理器（react-final-form），因此字段值由 Form 组件管理。因此，您应该defaultValue从 Dropdown 组件中删除该道具：

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

第二个错误：

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

我认为 react-final-form 将未知值初始化为空字符串。initialValues所以你应该在表单的 prop中将“下拉”值定义为一个空数组：

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

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