React渲染模态框时如何阻止useEffect意外执行

你判断错了触发逻辑：当前代码里的useEffect依赖数组为[]，本身仅会在组件首次挂载时执行一次，打开模态框的操作根本不会触发这个effect重新请求。
英雄区电影随机切换的真正原因是：你把随机选片的逻辑写在了组件函数顶层，每次组件重渲染（打开模态框触发的状态更新就会引发重渲染）都会重新执行Math.random()计算，选出新的随机电影，和useEffect无关。

方案1：将展示的英雄区电影存为独立状态（推荐，可控性最高） #

拉取到热门电影列表后，仅随机选片一次存入state，后续普通重渲染不会触发重新选片；需要换片（比如模态框关闭后刷新）时，手动更新这个状态即可。
参考代码：

const [movies, setMovies] = useState([]);
// 单独存储当前英雄区展示的电影
const [heroMovie, setHeroMovie] = useState(null);

useEffect(() => {
  axios.get(requests.requestPopular).then((response) => {
    const movieList = response.data.results;
    setMovies(movieList);
    // 拉取到列表后仅随机选一次
    const pickedMovie = movieList[Math.floor(Math.random() * movieList.length)];
    setHeroMovie(pickedMovie);
  });
}, []);

// 渲染时直接使用heroMovie即可，不要在渲染阶段重新计算随机值

如果需要模态框关闭后更换英雄区电影，直接在模态框的onClose回调里重新计算随机值、调用setHeroMovie更新就行，触发时机完全可控。

方案2：用useMemo缓存选片结果（轻量但可控性差） #

如果不想新增状态，可以用useMemo缓存随机选片的计算结果，仅当电影列表movies变化时才重新选片：

const randomPopularMovie = useMemo(() => {
  // 处理movies为空的初始状态
  if (!movies.length) return null;
  return movies[Math.floor(Math.random() * movies.length)];
}, [movies]);

这个方案的缺陷是只要movies数组更新就会自动重新选片，没法精准控制换片时机，适合不需要手动控制刷新的场景。

注意：不要在组件渲染阶段（函数顶层）直接写随机计算、可变值修改这类每次渲染会产生不同结果的逻辑，很容易引发非预期的UI更新。

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