更改 Redux Form Multiselect React Widget 的返回值

Question

我的 redux 表单作为道具接收如下列表类别：

[{"id": 1, "name_of_category": "foo"}, {"id": 2, "name_of_category": "bar"}]

使用 redux 表单网站上的 this example，我成功地将多选 React Widget 内置到我的表单中，因此用户可以选择“foo”或“bar”或两者。我的表单还成功返回了所选类别的名称列表，即表单提交时的["foo", "bar"]。

一切都很好，但为了让后端的生活更轻松，我想返回所选类别的 id 列表而不是名称列表。

对此我能做些什么？我是否需要引入一个额外的功能来完成这项工作？或者，React Widget 包中有内置功能？

这是我的 redux 表单的代码 sn-p：

import React from 'react';
import Multiselect from 'react-widgets/lib/Multiselect'
import { Field, reduxForm } from 'redux-form';
import { Form, Button } from 'reactstrap';

import 'react-widgets/dist/css/react-widgets.css'

const required = value => value ? undefined : 'Required';
const renderMultiselect = ({ input, data, valueField, textField }) => 
  let categories = [];
  data.map(category => categories.push(category.name));
  return (
    <Multiselect {...input}
      onBlur={() => input.onBlur()}
      value={input.value || []}
      data={categories}
      valueField={valueField}
      textField={textField}
    />
  )
};

const MyForm = (props) => {
  const { handleSubmit, submitting, onSubmit, categories } = props;
  return (
    <Form name="myform" onSubmit={handleSubmit(onSubmit)}>      
      <div>
        <label>Categories</label>
        <Field
          name="categories"
          component={renderMultiselect}
          data={categories} />
      </div>
      <Button color="primary" type="submit" disabled={submitting}>
        Submit
      </Button>
    </Form>
  );
};

export default reduxForm({
  form: 'myform',
  enableReinitialize: true
})(MyForm);

Answer 1

根据DOC：

Data Array:

为多选提供一组可能的值。如果一个数组 提供了对象，您应该使用 valueField 和 textField props，指定哪些对象属性包含值字段 （例如 id）和用于标记项目的字段。

valueField:

当 value 属性本身不是 dataItem 时，需要 valueField。

textField:

指定要在多选和多选中显示的数据项字段 选定的项目。

这意味着您需要指定valueField 和textField，以防数据格式为：

[{}, {}, {}]

这样写：

data = [{"id": 1, "name_of_category": "foo"}, {"id": 2, "name_of_category": "bar"}]

<Multiselect {...input}
   onBlur={() => input.onBlur()}
   value={input.value || []}
   data={data}                        //data will be same data not the name of categories
   valueField="id"                    //value will be id
   textField="name_of_category"       //text will be name of category
/>