浏览器resize时如何正确触发useEffect调整react-slick轮播卡片高度

你出现报错的核心原因是违反了React Hook的调用规则：所有Hook只能在组件的顶层作用域调用，不能嵌套在事件回调、循环、条件判断内部，因此不能把React.useEffect写在resize事件的回调函数里。

你可以把resize监听逻辑整体放到useEffect内部处理，同时记得在组件卸载时移除监听避免内存泄漏，优化后的代码如下：

const [upcomingEventsHeight, setUpcomingEventsHeight] = React.useState("auto");

// 封装获取高度的逻辑，方便复用
const updateSliderHeight = () => {
  const sliderTrack = document.getElementsByClassName("slick-track")[0];
  if (sliderTrack) {
    setUpcomingEventsHeight(`${sliderTrack.clientHeight}px`);
  }
};

React.useEffect(() => {
  // 组件首次挂载时等待slick初始化完成后获取高度
  const initTimer = setTimeout(updateSliderHeight, 3000);

  // 防抖函数，避免resize频繁触发执行
  let debounceTimer = null;
  const handleResize = () => {
    clearTimeout(debounceTimer);
    // 可以根据需求调整防抖间隔，300ms是通用的窗口调整防抖阈值
    debounceTimer = setTimeout(updateSliderHeight, 300);
  };

  // 注册resize监听
  window.addEventListener('resize', handleResize);

  // 组件卸载时清除所有定时器和监听事件，避免内存泄漏
  return () => {
    clearTimeout(initTimer);
    clearTimeout(debounceTimer);
    window.removeEventListener('resize', handleResize);
  };
}, []);

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