React-> material-ui->自动完成：从API获取值的问题

如何解决React-> material-ui->自动完成：从API获取值的问题

这是我关于stackoverflow的第一篇文章，但不是我的第一次访问:)如果我有任何错误或要求不完整（以及我的英语不好……），我谨此致歉。

我创建了带有api平台的API。这很棒。然后，我使用api-platform / admin作为前端。除自动完成代码外，其他一切都正常。

我必须对查询使用外部API。我不能使用react-admin的autocompleteInput，所以我尝试使用Material-ui。

API查询返回的结果（包含20个对象）：

{
"@context": "/contexts/Species","@id": "/v1/species/autocomplete","@type": "hydra:Collection","hydra:member": 
[
{
"@id": "/v1/species/0","@type": "Species","originId": 0,"scientificName": "incertae sedis","family": null,"status": "Synonyme"
},{
"@id": "/v1/species/1","originId": 1,"scientificName": "Animalia","status": "Valide"
},...
]
}

我的代码是：

const SpeciesAutocomplete = ({ id,label }) => {

const dataProvider = useDataProvider();
const [data,setData] = React.useState([]);
const [query,setQuery] = React.useState("");
const [value,setValue] = React.useState("0");

React.useEffect(() => {

    dataProvider.getList('v1/species/autocomplete?query=' + query,{
        pagination: {},sort: {},})
        .then(({data}) => {
            setData(data);
        })
},[query]);

return (
    <Autocomplete
        id={id}

        value={value}
        onChange={(event,newValue) => {
            setValue(newValue === null ? "0" : newValue.originId);
        }}

        options={data}

        inputValue={query}
        onInputChange={(event,newInputValue) => {
            setQuery(newInputValue);
        }}

        getoptionSelected={(option,value) => (option.originId  === value)}
        getoptionLabel={(option) => (option === null ? "" : option.scientificName  )}

        style={{ width: 300 }}
        loading={false}

        renderInput={(params) =>
            <TextField{...params}
                      label={label}
                      variant="outlined"
            />}
    />
);

但是我无法恢复值（id）...

谢谢，祝您周末愉快。