Javascript 物料界面自动完成不更新选项

我正在尝试对后端进行API调用，并在用户输入时获取建议。以下是我所拥有的：

const dispatch = useDispatch();
const [
  fromOptions,
] = useSelector(({ search: { fromOptions } }) => [
  fromOptions,
]);

  const handleFromChange = useCallback(
    async (event, value) => {
      console.log('event', event);
      console.log('value', value); // prints
      if (!value || value?.length < 3) {
        if (fromOptions.length) {
          dispatch({
            type: SET_FROM_OPTIONS_DELIVERY,
            payload: [],
          });
        }
      } else {
        const query = {
          params: {
            query: value,
          },
        };

        const { data } = await axios.get(api.GET.GET_OPTIONS, query);
        dispatch({
          type: SET_FROM_OPTIONS_DELIVERY,
          payload: data,
        });
      }
    },
    [fromOptions],
  );

<Autocomplete
    options={fromOptions}
    onInputChange={(event, value) => handleFromChange(event, value)}
    onChange={() => console.log('selected!!')}
    getOptionLabel={(option) => option}
    style={{ width: window.innerWidth * 0.2 }}
    renderInput={(params) => <TextField {...params} label='Combo box' variant='outlined' />}
/>

const dispatch=usedpatch（）；
常数[
从选项，
]=useSelector（{search:{fromOptions}}}）=>[
从选项，
]);
const handleFromChange=useCallback(
异步（事件、值）=>{
console.log（'event'，event）；
console.log（'value'，value）；//打印
如果（！value | | value？.length<3）{
if（fromOptions.length）{
派遣({
类型：从选项设置交付，
有效载荷：[]，
});
}
}否则{
常量查询={
参数：{
查询：值，
},
};
const{data}=wait axios.get（api.get.get_选项，查询）；
派遣({
类型：从选项设置交付，
有效载荷：数据，
});
}
},
[fromOptions]，
);
您可以查看控制台，发现
选项
数组会随着用户键入而更改，但下拉选项只会在onBlur上更改，然后再次更改为onFocus。
我发现您的沙盒是一个很难使用的示例，因为它随机选择的选项不一定与键入的输入匹配。这里是沙盒的一个修改版本，它生成与输入更相关的选项，并且似乎工作正常：。。