React admin 从 db 中获取 selectInput 的唯一数据答案

【问题标题】：React admin get unique data from db for selectInputReact admin 从 db 中获取 selectInput 的唯一数据
【发布时间】：2019-07-19 07:02:02
【问题描述】：

我想在下拉菜单中从 db 获取唯一数据，因为我有两个下拉菜单，并且两者相互依赖，例如，如果我在一个下拉菜单中选择某些内容，那么它将显示与数据相关的在另一个下拉列表中。 `

<FormDataConsumer>

  {({ formData, dispatch, ...rest }) => (

    <Fragment>

      <ReferenceInput basePath={props.basePath} validate={requiredValidator} source="cc_documents_section_id" reference="documents-section" label="Document Type">
       <SelectInput optionText="cc_document_type" {...rest} />
     </ReferenceInput>

     <ReferenceInput source="cc_documents_section_id" reference="documents-section" validate={requiredValidator} label="Document Name">
        <SelectInput optionText="cc_document_name"
                            onChange={value => dispatch(
                            change(REDUX_FORM_NAME,'cc_document_type', null)
                                )}{...rest}
                         />
          </ReferenceInput>

       </Fragment>
      )}
</FormDataConsumer>`

在 db 中有这样的字段

{ doctype: "A", docname: "X", id: 1 },
{ doctype: "A", docname: "Y", id: 2 },
{ doctype: "B", docname: "Z", id: 3 }

在第一个下拉列表中，我想显示来自 doctype 的唯一数据，在第二个下拉列表中，它将相应地显示 docname

【问题讨论】：

标签： reactjs react-redux react-admin

【解决方案1】：

为此我们使用了一个自定义输入组件：

interface UniqueSelectInputProps {
  choices?: [];
  source?: string;
}

const UniqueSelectInput = (props: UniqueSelectInputProps) => {
  const { choices, source } = props;

  let choices_unique: Array<{ name: String; id: String }> = [];
  if (choices && source) {
    const choices_unique_list = choices
      .map(item => item[source])
      .filter((value, index, self) => self.indexOf(value) === index);
    choices_unique = choices_unique_list.map(item => {
      return { name: item, id: item };
    });
  }
  return (
    <>
      <SelectInput choices={choices_unique} source={source} />
    </>
  );
};

【讨论】：