Dropdown与Date组件双向绑定异常：仅首次选择生效问题排查

你实现了下拉框到日期选择器的双向绑定，但仅首次选择下拉选项时日历能同步选中，后续更改选项时日历无响应，以下是核心原因和修复方案：

核心原因 #

1. useState状态更新的闭包陷阱：
   在Dropdown和DatePicker的onChange回调中，你直接使用当前渲染周期的formValue来合并新状态：

   setFormValues({
     ...formValue,
     date: ...
   });
   

   组件多次渲染后，闭包会捕获旧的formValue值，导致新状态无法正确合并最新数据，最终DatePicker的selected属性无法获取到更新后的日期。

2. 函数传参不匹配：
   stringToDate函数内部通过data.value做判断，但你调用时传入的是data.value（字符串类型），导致函数内的data.value全部为undefined，后续返回的日期可能不符合预期，甚至返回重复值让DatePicker误以为状态未变化。

修复代码 #

const [formValue, setFormValues] = useState({ date: null });

// 调整函数参数为字符串，匹配实际传入值
const stringToDate = (value: string) => {
  const date = value === "6 Months"
    ? moment().subtract(6, "months")
    : value === "Last Month"
      ? moment().subtract(1, "months")
      : moment().subtract(1, "weeks");
  return date.toDate();
}

<GridColumn width={8} className="fullWidth">
  <label>How much back </label>
  <Dropdown
    fluid
    selection
    options={dropdownOptions}
    value={dateDropdownValue}
    onChange={(_e: any, data: any) => {
      // 用函数式更新获取最新状态
      setFormValues(prev => ({
        ...prev,
        date: stringToDate(data.value),
      }));
      setDateDropdownValue(data.value);
    }}
  />
</GridColumn>
<GridColumn width={8} className="fullWidth">
  <label>Exact Date is:</label>
  <CalendarWrap>
    <DatePicker
      onChange={(date) => {
        // 同样使用函数式更新避免闭包问题
        setFormValues(prev => ({
          ...prev,
          date: date,
        }));
      }}                  
      selected={formValue.date}
    />
    <CalendarImg src={Icons.CalendarImage}></CalendarImg>
  </CalendarWrap>
</GridColumn>

相关技术概念 #

• React useState函数式更新：当新状态依赖旧状态时，必须采用函数式更新（setState(prev => newState)），避免闭包捕获旧状态导致的更新异常。
• 闭包与组件渲染：React每次渲染都会生成新的函数作用域，内部函数会捕获当前作用域的变量，若状态更新未基于最新值，就会出现状态不同步问题。
• 受控组件：DatePicker属于受控组件，其选中状态完全由selected属性控制，只有该属性值发生变化时，组件才会更新视图。

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