React Dropdown组件setQuery状态需二次点击才更新问题

你遇到的「第二次点击才同步」是写法问题叠加导致的，不是React状态更新本身的bug：

• 闭包陷阱：在调用setQuery的同一执行上下文里立刻打印query，拿到的永远是当前渲染轮次的闭包旧值。状态更新是异步批处理的，要等下一次组件重渲染才能拿到最新值，你看到的日志滞后不是更新没生效，是日志打印时机不对。
• 逻辑判断错误：你用selected?.xxx || prev.xxx做字段合并时，||会把所有假值（比如空字符串、数字0这些合法的表单值）都判定为false，直接fallback到旧的prev值，导致第一次选择时如果选的是对应假值，字段根本不会更新。
• 冗余状态同步：你额外用useEffect监听selected再同步到query，本身就多了一轮状态更新链路，平白增加重渲染和状态不同步的风险。

直接按下面的逻辑改就能解决：

1. 去掉多余的useEffect同步逻辑，不要维护两份强关联的状态链路，直接在Dropdown的选择回调里一次性更新selected和query
2. 把短路运算符||换成空值合并运算符??，只有当选中项的对应字段是null/undefined时才保留旧值，避免合法假值被错误覆盖
3. 把状态打印逻辑移到组件顶层渲染位置，不要放在setState调用后面，才能拿到最新的状态值

修复后的完整代码：

interface queryProps {
  intensity: string;
  categoryId: string;
  coachId: string;
  minDuration: number;
  maxDuration: number;
}

const Filter = () => {
  const [selected, setSelected] = useState<any>(undefined);
  const [query, setQuery] = useState<queryProps>({
    intensity: '',
    categoryId: '',
    coachId: '',
    minDuration: 0,
    maxDuration: 1000,
  });

  const handleDropdownSelect = (selectItem: any) => {
    setSelected(selectItem);
    setQuery(prev => ({
      ...prev,
      intensity: selectItem?.intensity ?? prev.intensity,
      categoryId: selectItem?.categoryId ?? prev.categoryId,
      coachId: selectItem?.coachId ?? prev.coachId,
      minDuration: selectItem?.minDuration ?? prev.minDuration,
      maxDuration: selectItem?.maxDuration ?? prev.maxDuration,
    }));
  };

  // 组件顶层打印才能拿到每次渲染的最新状态
  console.log('current selected: ', selected);
  console.log('current query: ', query);

  return (
    <>
      <Dropdown
        label="Intensity"
        data={intensityItem}
        onSelect={handleDropdownSelect}
      />
    </>
  )
}

补充：如果业务场景必须保留useEffect同步selected到query的写法，只需要把||换成??，同时不要在setQuery后面立刻打query的日志即可——那个位置永远拿不到最新值，要监听query变化可以单独加一个依赖项为[query]的useEffect打印。

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