Question

我正在尝试对后端进行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 { data } = await axios.get(api.GET.GET_OPTIONS, query);部分，正确获取了数据/建议，但是当我在调度操作中设置fromOptions时，它不会更新下拉列表。先执行Autcomplete组件的onBlur，再执行onFocus，似乎可以呈现所获取的建议，但是我显然不能期望用户这样做。如何强制即时重新渲染？

CodeSandox 您可以查看控制台，并看到options数组随用户类型而变化，但下拉选项仅在onBlur之后再在onFocus上变化。

材质UI自动完成不更新选项

0 个答案: