React MUI AutoComplete渲染阶段调用setState触发更新警告

React有明确的渲染规则：禁止在一个组件的渲染执行阶段，触发另一个组件的状态更新，你的写法刚好违反了这个规则。
MUI Autocomplete组件传入的filterOptions属性，执行时机是Autocomplete自身的渲染流程内部：组件渲染时会同步调用这个函数，计算得到要展示的选项列表，整个调用过程完全处于Autocomplete的渲染上下文中，不属于渲染完成后触发的副作用钩子。
你在这个过滤函数里直接调用父组件CountrySelectorPopup的setState，本质就是在Autocomplete还没完成本轮渲染的时候，强行触发外部组件的状态更新，直接命中React的状态更新检测逻辑，才抛出了你看到的警告。
注意filterOptions本身应该是纯函数：输入原始选项和过滤参数，输出过滤后的选项列表，函数内部不应该包含任何状态更新、事件触发这类副作用逻辑，你之前的写法把副作用放进了纯渲染计算的流程里，才会出现问题。

• 把filterOptions改回纯函数，只保留过滤计算、返回结果的逻辑，不要在内部写任何setState调用。

const handleFilterOptions = useCallback((
    options: TermObject[],
    params: FilterOptionsState<TermObject>
  ) => {
    // 仅做过滤计算，无副作用
    return filter(options, params);
  }, []);

• 如果确实需要拿到过滤结果的最后一项同步到状态中，把这部分更新逻辑挪到渲染完成后执行的副作用里：比如监听输入值inputValue的变化，在useEffect中执行过滤计算，拿到结果后再调用setState即可。

// 渲染完成后再执行状态更新，不会触发警告
useEffect(() => {
  const filtered = filter(allCountryOptions, {
    inputValue,
    getOptionLabel: (option) => option.label
  });
  setState(filtered.at(-1));
}, [inputValue, allCountryOptions]);

• 也可以直接在Autocomplete提供的onInputChange回调中做这部分计算，这个回调是用户输入触发的事件回调，不属于渲染阶段流程，在这里更新状态也不会触发该警告。

内容的提问来源于stack exchange，提问作者Yum