React组件onClick事件仅生效一次，求问题原因排查

核心问题：状态更新函数未返回新状态值 #

在Movie组件的handleClick函数中，调用setMovieDetailPage的函数式更新时，仅在prev == 0时打印日志，但没有返回任何新的状态值：

setMovieDetailPage((prev) => {
  if (prev == 0) {
    console.log(prev)
  }
  // 无返回值，默认返回undefined
})

• 第一次点击时，prev为初始值0，执行打印操作，但因函数无返回值，React会将movieDetailPage的状态更新为undefined。
• 第二次及后续点击时，prev的值变为undefined，不满足prev == 0的判断条件，因此不会触发打印，看起来点击事件无响应。

次要风险：全局变量的状态污染 #

BoxOffice组件中，data被声明为组件外部的let变量：

let data;
function BoxOffice(props) {
  // ...
}

多个BoxOffice实例会共享该变量，可能引发不可预期的状态混乱，建议将data的声明移到组件内部。

1. 确保状态更新函数返回新状态：如果需要修改状态，在函数式更新中明确返回新值。比如要切换详情页的显示状态：

setMovieDetailPage((prev) => {
  console.log(prev);
  // 返回新状态，实现0和非0的切换
  return prev === 0 ? 1 : 0;
});

如果只是需要打印当前状态，无需调用setMovieDetailPage，可从父组件直接传递当前movieDetailPage值到Movie组件。

2. 将data移到组件内部：避免全局变量导致的状态问题：

function BoxOffice(props) {
  let data;
  // ... 原有逻辑不变
}

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