React点击日历传日期给子组件仅首次生效 传值异常问题咨询

问题根因 #

你的代码存在两个核心问题导致子组件无法拿到最新选中日期：

• 点击日期的交互逻辑错误：onClickDay绑定的clickTracker是切换show的布尔值，第一次点击日期时show从false变为true，子组件渲染拿到当前日期；第二次点击任意日期时，show会从true变为false，子组件直接卸载，自然不会响应日期更新。后续点击只是反复切换子组件的显示/隐藏，只会在子组件首次挂载时拿到当时的日期值，不会同步后续的日期变化。
• 若子组件本身持续显示但依然不更新，大概率是子组件内部实现问题：比如子组件仅在挂载生命周期（空依赖的useEffect）中读取了一次dataFromParent，没有监听该props的变化。

修复步骤 #

1. 修正点击日期的交互逻辑 #

把clickTracker的切换逻辑修改为「点击日期时始终显示子组件」，如果需要点击已选中日期关闭可以额外加判断，基础修复代码如下：

// 原逻辑删除
// function clickTracker(e) {
//   setTracker(!show);
// }

// 替换为新逻辑
function clickTracker(e) {
  // 始终设置为显示，不需要切换
  setTracker(true);
  // 若需要支持再次点击选中的日期关闭，可放开下面的判断
  // if(moment(e).isSame(dateState, 'day')) {
  //   setTracker(!show);
  // } else {
  //   setTracker(true);
  // }
}

2. 确保子组件响应props变化 #

如果修改交互后子组件还是拿不到最新日期，检查子组件代码：

• 不要只在空依赖的useEffect里读取dataFromParent，如果需要在日期变化时执行逻辑，把dataFromParent加入依赖数组：

// 子组件内的错误写法
useEffect(() => {
  // 处理日期的逻辑
}, [])

// 子组件内的正确写法
useEffect(() => {
  // 处理日期的逻辑
}, [dataFromParent])

• 如果子组件用了React.memo包裹，确保没有自定义错误的比较逻辑，默认浅比较对字符串类型的日期是生效的。

可选优化 #

可以把格式化后的date也用状态存储，避免每次渲染重复计算，不过这不是导致当前问题的核心原因：

const [date, setDate] = useState(moment(new Date()).format("YYYY-MM-DD"));
const changeDate = (e) => {
  setDateState(e);
  setDate(moment(e).format("YYYY-MM-DD"));
};

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