AntD 5.0 DatePicker状态变更后默认值不更新问题求助

嘿，我看了你的代码，马上就发现问题所在了！这其实是React状态更新的常见坑，加上DatePicker的属性用错了，才导致其他组件没跟着更新。

问题根源 #

1. 状态更新违反了不可变性原则：在setFlightInfoObj里，你直接修改了prev这个旧的状态对象（oldVal = prev; oldVal.departing[flightInd] = dateString;），然后返回同一个对象。React是通过浅比较新旧状态的引用来决定是否重新渲染组件的，当新旧状态引用相同时，React会认为状态没变化，自然不会触发其他组件的更新。
2. DatePicker用错了属性：你用了defaultValue，这个属性只会在组件第一次渲染时生效，后续状态变化不会影响它。要实现受控组件（状态变化时同步更新视图），应该用value属性。

修复方案 #

步骤1：正确更新状态，保证不可变性 #

更新flightInfoObj的时候，要创建新的对象和数组，而不是直接修改原对象。可以用ES6的展开运算符来复制原数据，再修改对应的值。

步骤2：把DatePicker的defaultValue换成value #

这样DatePicker就会完全受状态控制，状态变化时自动更新视图。

修改后的完整代码 #

import { DatePicker, Tabs } from "antd";
import Image from "next/image";
import styles from "@desktopStyles/common/searchBox.module.css";
import dayjs from "dayjs";

function DepartDateInput({
  classname,
  flightIndex,
  flightInfoObj,
  setFlightInfoObj,
  setFlag,
}) {
  const onDepartDateChange = (date, dateString, flightInd) => {
    setFlightInfoObj((prev) => {
      // 复制原对象，创建新的对象保证不可变性
      return {
        ...prev,
        // 复制departing数组，修改指定索引的值
        departing: prev.departing.map((item, index) => 
          index === flightInd ? dateString : item
        )
      };
    });
    // 修复状态更新逻辑后，这个强制刷新的flag可以移除了
    // setFlag((prev) => !prev);
  };

  return (
    <div className={classname}>
      <span>{flightInfoObj.departing[flightIndex]}:</span>
      <DatePicker
        onChange={(date, dateString) =>
          onDepartDateChange(date, dateString, flightIndex)
        }
        // 用value替代defaultValue，实现受控组件
        value={dayjs(flightInfoObj.departing[flightIndex], "YYYY-MM-DD")}
      />
     
      <Image
        className={styles.src_ico}
        src="/images/desktop/src_calander_ico.svg"
        width={18}
        height={18}
        alt="calendar icon"
      />
    </div>
  );
}

export default DepartDateInput;

额外说明 #

• 我把setFlag的代码注释掉了，因为现在状态更新是正确的不可变更新，React会自动触发所有依赖flightInfoObj的组件重新渲染，这个强制刷新的flag就没必要啦。
• 用map来更新departing数组是更规范的不可变更新方式，避免直接修改原数组。

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