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

Question

I am creating a site using react-admin and I used the following code to create an AutocompleteInput with both id and description so you can search both and it will filter the options.

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"/>
    );
};

After That I use my component as follows:

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

    </SimpleForm>
</Create>

But when doing this, the component AutocompleteInput is rendered before the data is assigned, so data doesnt get to my component. Is there a way for it to wait until dataProvider.getList is ready before sending the return? I tried with wait/async but the problem is then that the result is a promise and not an object. Im sure Im close to the solution but have been stuck in this for a while.

Answer 1

Take a look at UseEffect hook example: Querying the API , provided in React-Admin documentation.

I've just tried your example like this:

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>
  );
};