React拆分组件后导入组件状态不更新？onChange失效求助

问题根源 #

拆分组件后状态不更新的核心原因：

• StartDate组件内部维护了独立的startDate状态，Flatpickr的onChange仅更新了这个内部状态，完全没有触发父组件ParamSelection传递的onChange回调。
• 父组件的startDate状态从未被调用更新，自然不会变化。

修复方案 #

将StartDate改为受控组件，状态由父组件统一管理，组件仅负责渲染和回调传递：

修改后的ParamSelection组件

function ParamSelection() {
  const [startDate, setStartDate] = useState();
  return (
    <div className={styles.paramSelection}>
      <StartDate onChange={(date) => setStartDate(date)} />
    </div>
  );
};

修改后的StartDate组件

function StartDate({ onChange }) {
  // 移除内部独立的useState，状态由父组件管控
  return (
    <Flatpickr
      className={styles.dateSelection}
      placeholder="Select Start Date and Time"
      options={{
        enableTime: true,
        enableSeconds: true,
        dateFormat: "Y-m-dTH:i:S",
        time_24hr: true,
        position: "below",
        minuteIncrement: 1,
        secondIncrement: 1,
        mode: "single",
        static: true
      }}
      onChange={(date) => onChange(date)} // 触发父组件的回调，传递选中的日期
    />
  );
};

export default StartDate;

优化建议（可选） #

如果需要让StartDate组件的显示和父组件状态完全同步，可以将父组件的startDate作为value传递给Flatpickr，实现完全受控：

// 修改StartDate组件
function StartDate({ onChange, value }) {
  return (
    <Flatpickr
      className={styles.dateSelection}
      placeholder="Select Start Date and Time"
      options={{
        // 保持原有配置不变
        enableTime: true,
        enableSeconds: true,
        dateFormat: "Y-m-dTH:i:S",
        time_24hr: true,
        position: "below",
        minuteIncrement: 1,
        secondIncrement: 1,
        mode: "single",
        static: true
      }}
      value={value}
      onChange={(date) => onChange(date)}
    />
  );
};

// 修改ParamSelection中组件调用
<StartDate 
  value={startDate}
  onChange={(date) => setStartDate(date)} 
/>

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