React调用API修改state后组件未重渲染，Calendar子组件不更新如何解决

1. 子组件未触发重渲染的原因 #

• 状态更新时未传入新引用：调用setUpcomingDates时如果直接修改原数组（如upcomingDates.push()）后传入原数组，React的浅比较会判定状态无变化，不会触发父组件重渲染，子组件自然不会接收新props。
• 子组件存在渲染拦截逻辑：如果子组件用React.memo包裹，默认的浅比较无法识别数组内容的变化，或是自定义的比较函数逻辑错误，会跳过子组件的重渲染。

2. 加入依赖后无限循环的原因 #

你的useEffect逻辑是调用API更新upcomingDates状态，若将upcomingDates加入依赖数组，每次状态更新都会触发useEffect重新执行，再次调用API更新状态，形成无限循环的闭环。这类初始化数据请求的useEffect本就只需要在组件挂载时执行一次，不需要把请求结果对应的状态加入依赖。

• 修正状态更新逻辑：API请求成功后，传入新的数组引用更新状态，不要修改原数组。示例：

useEffect(() => {
  fetch('/api/dates')
    .then(res => res.json())
    .then(data => {
      // 直接传入接口返回的新数组，或是浅拷贝后传入，保证引用更新
      setUpcomingDates([...data.dates])
    })
}, []) // 保持空依赖，只执行一次

• 调整子组件渲染逻辑：
  1. 移除不必要的React.memo包裹，组件会默认随props变化重渲染
  2. 若需要保留React.memo优化，自定义比较逻辑适配数组类型props，示例：

  // 数组元素为基础类型可直接用JSON.stringify比对，复杂对象可使用深比较工具
  const Calendar = React.memo(({ name, dates }) => {
    // 子组件原有逻辑
  }, (prev, next) => {
    // 自定义比较规则，只有name和dates都相同时才跳过重渲染
    return prev.name === next.name && JSON.stringify(prev.dates) === JSON.stringify(next.dates)
  })
  

• 排查验证：可在父组件函数体内添加console.log('父组件重渲染，upcomingDates：', upcomingDates)，确认状态更新后父组件是否正常重渲染，快速定位问题出在父组件状态更新环节还是子组件接收环节。

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