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

【问题标题】：React-Select with redux-form value undefined after first submit首次提交后未定义 redux-form 值的 React-Select
【发布时间】：2018-07-18 11:13:05
【问题描述】：

我已将 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>
);
};

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

【问题讨论】：

标签： reactjs redux-form react-select

【解决方案1】：

经过一些认真的调试 - 这是由于我执行 handleInitialise() 的方式。 ReduxForm 期望值数组采用特定格式，具体来说：

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

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

【讨论】：