时间戳

首页 > 解决方案 > react-admin中有两个字段的自动完成输入？

reactjs - react-admin中有两个字段的自动完成输入？

问题描述

我正在使用 react-admin 创建一个站点，并使用以下代码创建了一个带有 id 和 description 的 AutocompleteInput，这样您就可以同时搜索它们，它会过滤选项。

const choices = [
        { number: 102, description: 'Furniture' },
        { number: 103, description: 'Rugs' },
        { number: 104, description: 'Plants' },
    ];    
    const optionRenderer = choice => `${choice.number} ${choice.description}`;
        export const ActionsCreate = (props) => (
            <Create title=" " {...props}>
                <SimpleForm>
                    <AutocompleteInput source="casenumber" label="Juttu" choices={choices} optionText={optionRenderer} optionValue="number"/>
                    <TextInput source="billed" label="Tila" />
                    <TextInput source="handler" label="Tekijä" />
                </SimpleForm>
            </Create>
        );

此代码生成以下内容： 在此处输入图像描述 我现在尝试生成相同的内容，但选择不是静态的。选择引用我数据库中的另一个表，“数字”是将我创建的条目与该“选择”表链接的数字。通常人们使用 ReferenceInput 和 AutocompleteInput 但我认为我需要创建一个自定义字段并使用 useDataProvider() 获取表来实现这一点，所以我尝试了以下方法：

const CasesAutocompleteInput = () => {
    const dataProvider = useDataProvider();
    let choices = [];
    const res =  dataProvider.getList('cases', {
        pagination: { page: 1, perPage: 500 },
        sort: { field: 'number', order: 'ASC' },
        filter: { },
    }).then(response => choices = response.data);

    const optionRenderer = choice => `${choice.number} ${choice.description}`;

    return(
        <AutocompleteInput source="casenumber" label="Juttu" choices={choices} optionText={optionRenderer} optionValue="number"/>
    );
};

之后我使用我的组件如下：

export const ActionsCreate = (props) => (
<Create title=" " {...props}>
    <SimpleForm>
        <CasesAutocompleteInput />
        <TextInput source="billed" label="Tila" />
        <TextInput source="handler" label="Tekijä" />

    </SimpleForm>
</Create>

但是这样做时，组件 AutocompleteInput 在分配数据之前呈现，因此数据不会到达我的组件。有没有办法让它等到 dataProvider.getList 准备好后再发送返回？我尝试了等待/异步，但问题是结果是一个承诺而不是一个对象。我确定我接近解决方案，但已经被困了一段时间。

标签： reactjsreact-admin

解决方案

看一下UseEffect钩子示例：查询 API，在 React-Admin 文档中提供。

我刚刚试过你的例子是这样的：

const ActivityCreate = (props) => {
  const dataProvider = useDataProvider();
  const [projects, setProjects] = useState();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  useEffect(() => {
    dataProvider
      .getList("projects", {
        pagination: { page: 1, perPage: 100 },
        sort: { field: "id", order: "ASC" },
        filter: {},
      })
      .then(({ data }) => {
        setProjects(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <Loading />;
  if (error) return <Error />;
  if (!projects) return null;

  const project_choices = projects.map((project) => ({
    id: project.id,
    name: project.name,
  }));

  return (
    <Create {...props}>
      <SimpleForm>
        <SelectInput source="project" choices={project_choices} />
      </SimpleForm>
    </Create>
  );
};

推荐阅读