[REECT] [MUI]警告：在渲染其他组件时无法更新组件

Question

我正在使用AutoComplete（MUI）来创建一个国家选择器，但是下面收到了错误消息。

Warning: Cannot update a component (`CountrySelectorPopup`) while rendering a different component (`ForwardRef(Autocomplete)`). To locate the bad setState() call inside `ForwardRef(Autocomplete)`

只有当我有一个setState setState（过滤[Filled.length -1]）内部的内部，此错误才会发生。

const handleFilterOptions = useCallback((
    options: TermObject[],
    params: FilterOptionsState<TermObject>
  ) => {
    const filtered = filter(options, params);
    setState(filtered[filtered.length - 1]);
    return filtered;
  }, [1]);

然后我将此功能传递给自动完成过滤器。

<Autocomplete
  clearOnBlur
  fullWidth
  freeSolo
  onChange={(_e, _newValue) => setValue("")}
  onInputChange={(_e, newValue) => setInputValue(newValue)}
  value={value}
  inputValue={inputValue}
  open={true}
  filterOptions={handleFilterOptions}...

我相信这是自动完成的相关错误，但是任何人都可以告诉我为什么会发生这种情况，因为这似乎不是对我的糟糕的呼叫。

Answer 1

您需要从handlefilteroptions移出setState函数。
通过setState内部oninputChange prop。

都是因为渲染行为自动完成组件。