Next.js/JavaScript：将if语句移入useEffect遇状态更新问题求助

1. 把判断逻辑移入useEffect的正确写法 #

问题核心是之前的useEffect依赖项没配全，且没处理genreResults更新后的状态同步。改成下面这样，把数据请求和状态转换拆成两个useEffect，就能解决null输出的问题：

// hooks/useFetchMovieGenreResults.js
import { useState, useEffect } from 'react';
import { fetchMovieGenreResults } from '../api/api';

export const useFetchMovieGenreResults = () => {
  const [genreResults, setGenreResults] = useState(null);
  const [genreMap, setGenreMap] = useState(null);

  // 单独处理数据请求
  useEffect(() => {
    const getGenreResults = async () => {
      const data = await fetchMovieGenreResults();
      setGenreResults(data);
    };

    getGenreResults();
  }, []);

  // 当genreResults有值时，生成并更新genreMap
  useEffect(() => {
    if (genreResults) {
      const genreMapData = genreResults.genres.reduce((acc, genre) => {
        acc[genre.id] = genre.name;
        return acc;
      }, {});
      setGenreMap(genreMapData);
    }
  }, [genreResults]);

  return { genreMap };
};

这么做的好处：

• 逻辑拆分清晰，符合React Hooks的最佳实践
• 只有genreResults变成有效数据时，才会触发转换逻辑，不会出现null输出
• 外部不需要额外的if判断，减少无效渲染触发

2. 彻底减少渲染次数的优化方案 #

如果想把渲染次数降到最低，可以直接在请求完成后同步生成genreMap，不用单独维护genreResults状态：

// hooks/useFetchMovieGenreResults.js
import { useState, useEffect } from 'react';
import { fetchMovieGenreResults } from '../api/api';

export const useFetchMovieGenreResults = () => {
  const [genreMap, setGenreMap] = useState(null);

  useEffect(() => {
    const getGenreResults = async () => {
      const data = await fetchMovieGenreResults();
      // 确保数据有效再转换
      if (data?.genres) {
        const genreMapData = data.genres.reduce((acc, genre) => {
          acc[genre.id] = genre.name;
          return acc;
        }, {});
        setGenreMap(genreMapData);
      }
    };

    getGenreResults();
  }, []);

  return { genreMap };
};

这个方案一步到位，请求完直接处理数据并更新状态，组件只会在初始加载和genreMap生成时各渲染一次，彻底消除多余的渲染流程。

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