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

我正在使用react-admin创建一个网站，并使用以下代码创建一个包含id和描述的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>
        );

This code generates the following: I'm trying now to generate the same but the choices are not static. Choices reference to another table in my database and the "number" is the number that will link the entry Im creating with that "choices" table. Usually people use a ReferenceInput and an AutocompleteInput but I think I need to make a custom field and fetching the table with useDataProvider() to achieve this, so I tried the following:

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 准备好后再发送返回？我尝试使用 wait/async 但问题是结果是一个承诺而不是一个对象。我确信我已经接近解决方案，但已经被困在这个问题上一段时间了。

看一眼UseEffect钩子示例：查询API https://marmelab.com/react-admin/Actions.html，在 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>
  );
};