React-Select 首次提交后 redux-form 值未定义

Question

我已经将 React-Select (multi) 与 redux-form 集成在一起。如果您 select 一个值并提交，它会起作用。但是，如果您需要再次提交表单（即他们有一个无效字段），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>
);
};

无论我做什么，第二次 "Submit" 单击总是有一个未定义的数组 "category"。

Answer 1

经过认真调试后 - 这是由于我执行 handleInitialise() 的方式所致。 ReduxForm 期望值数组采用特定格式，特别是：

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

遇到 'undefined' 值的任何人都请仔细注意您设置和检索值的方式。避免在这两种情况下改变对象，因为我认为这会导致一些奇怪的行为。

React-Select 首次提交后 redux-form 值未定义

React-Select with redux-form value undefined after first submit

reactjs

react-select

redux-form