Question

我已将React-Select（multi）与redux-form集成在一起。如果您选择一个值并提交，它就有效。但是，如果您需要再次提交表单（即，它们具有无效字段），则React-Select（multi）具有未定义值的数组。

<Field
  ref={ref => this.refTest = ref}
  className = "form-control"
  name="categories"
  options={
    this.state.categories.map(c => {
      return { value: c.id, label: c.categoryName };
    })
  }
  onBlur={this.onBlur}
  component={multiSelect}
/>

multiSelect正在使用此组件：

export const multiSelect = (field) => {
console.log(field);
return(
  <div>
    <Select
      name={field.name}
      {...field.input}
      className="section"
      multi={true}
      options={field.options}>
    </Select>
    {field.meta.touched && field.meta.error &&
    <label id="basic-error" className="validation-error-label">This field is required.</label>}
  </div>
);
};

无论我做什么，第二个“提交”点击总是有一个未定义的“类别”数组。

Answer 1

经过一些严肃的调试 - 这是由于我执行handleInitialise（）的方式。 ReduxForm期望值的数组采用特定格式，具体为：

[{value: "1", label: "Test"}, ...]

任何遇到“未定义”值的人都会特别注意您设置和检索值的方式。在这两种情况下都避免改变对象，因为我认为这会导致一些奇怪的行为。

第一次提交后，React-Select的redux-form值未定义

1 个答案: