Next.js中useEffect更新useState后组件不渲染问题排查

核心原因 #

问题本质和Next.js无关，主要是违反了React的state更新机制，常见情况：

• 直接修改原state数组：比如用data.push()这类操作修改初始空数组，再传递给setData，因为数组引用没变化，React浅比较后认为state未更新，不会触发重渲染。
• useEffect依赖项错误：要么没加必要依赖导致数据获取逻辑没执行，要么依赖项设置不当导致重复执行但未正确更新state。
• 异步获取后未传递新数组：更新state时传递的还是原数组的引用，React无法感知变化。

解决方法 #

1. 始终传递新数组更新state
   永远不要直接修改state变量，获取数据后创建新数组传入setData：

const [data, setData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/your-data');
    const fetchedArray = await res.json();
    // 直接传入新获取的数组（引用全新）
    setData(fetchedArray);
    // 如果需要合并旧数据，用函数式更新确保拿到最新state
    // setData(prevData => [...prevData, ...fetchedArray]);
  };
  fetchData();
}, []);

2. 检查useEffect依赖项

• 如果数据依赖某个变量（比如路由参数id），必须把该变量加入依赖数组：

  useEffect(() => {
    // 根据id获取数据
  }, [id]);
  

• 如果只需要执行一次数据获取，保留空数组[]作为依赖。

3. Next.js场景优化（可选）
   如果数据需要在页面初始渲染时就展示，优先用Next.js的服务端数据获取方法：

• 服务端渲染（SSR）：用getServerSideProps在服务端获取数据，通过props传给组件，避免客户端useEffect的延迟。
• 静态生成（SSG）：用getStaticProps预渲染数据，适合数据不频繁更新的场景。

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