React中子组件未重绘问题求助：父子组件状态更新异常

React的状态更新依赖于引用变化来识别状态是否改变。Date属于引用类型，你直接调用pageDate.setDate()只是修改了原对象的属性，并没有改变该对象的引用地址。当执行setPageDate(pageDate)时，React对比前后状态的引用，发现二者完全相同，就会判定状态没有发生变化，因此不会触发组件的重渲染。

修改子组件的onClickNextDate方法，创建一个新的Date实例，基于原日期修改后再更新状态：

function DateSelector({ pageDate, setPageDate }) {
  const options = {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  };

  const onClickNextDate = () => {
    // 创建新的Date对象，避免直接修改原状态引用
    const newDate = new Date(pageDate);
    newDate.setDate(newDate.getDate() + 1);
    setPageDate(newDate);
  };
  return (
    <div className={styles.wrapper}>
      <p>{pageDate.toLocaleDateString('en-EN', options)}</p>
      <p className={styles.arrow} onClick={onClickNextDate}>
        next
      </p>
    </div>
  );
}

• 所有引用类型的状态（对象、数组、Date等），都不能直接修改原实例，必须创建新的引用实例后再调用状态更新函数，这样React才能正确识别状态变化并触发重渲染。
• 父组件的代码无需调整，已经正确完成了状态和更新函数的传递。

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