Next.js 13中setState与onClick箭头函数引发无限渲染问题

问题根源 #

1. 不必要的await使用：服务器组件中对data.results和genreData.genres添加了await，但这两个值已经是fetchData解析完成的同步数组，虽然不会直接触发无限循环，但会引入潜在的异常风险。
2. 无缓存的API请求：自定义fetchData使用原生fetch，在Next.js 13服务器组件中默认不会缓存请求结果，导致每次服务器组件渲染时都会重新拉取分类数据，生成新的allGenres数组引用。客户端组件GenreSidebar接收的genres props频繁变化，结合点击后的状态更新，触发了无限渲染循环。
3. 错误处理不完整：fetchData的catch块仅打印错误但未抛出，若API请求失败会导致后续代码拿到undefined，引发潜在崩溃。

修复步骤 #

1. 修正服务器组件的await错误 #

移除data.results和genreData.genres前的await，因为fetchData已完成JSON解析并返回同步数据：

// MoviesPage.tsx
const MoviesPage = async () => {
  const data = await fetchData(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`);
  const movies: MediaSingle[] = data.results; // 移除await
  const genreData = await fetchData(`https://api.themoviedb.org/3/genre/movie/list?api_key=${apiKey}&language=en-US`);
  const allGenres = genreData.genres; // 移除await
  
  // 其余代码保持不变
};

2. 为API请求添加缓存 #

修改fetchData函数，启用Next.js的缓存机制，确保相同请求不会重复发起，稳定allGenres的引用：

// helpers.ts
export const fetchData = async (url: string) => {
  try {
    const res = await fetch(url, { cache: 'force-cache' }); // 明确指定缓存策略
    if (!res.ok) {
      throw new Error("Request Failed!");
    }
    const data = await res.json();
    return data;
  } catch (error) {
    console.log(error);
    throw error; // 抛出错误，让调用方可以捕获处理
  }
};

3. 优化客户端组件性能（可选） #

使用useCallback缓存点击处理函数，避免因函数引用变化导致的不必要渲染：

// GenreSidebar.tsx
import { useState, useCallback } from "react";

const GenreSidebar = ({ genres }: GenreSidebarProps) => {
  const [currentGenre, setCurrentGenre] = useState<string>('');

  // 用useCallback缓存处理函数
  const genreClickHandler = useCallback((genre: string) => {
    setCurrentGenre(genre);
  }, []);

  return (
    <>
      <div className={classes.sidebar}>
        <ul>
          {genres?.map((genre) => (
            <li onClick={() => genreClickHandler(genre.name)} key={genre.id}>
              {genre.name}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
};

原理说明 #

• Next.js 13服务器组件中，配置缓存的fetch会自动缓存请求结果，确保allGenres数组引用稳定，避免客户端组件因props频繁变化而重复渲染。
• 移除不必要的await消除了异步逻辑错误，保证数据获取流程的正确性。
• useCallback缓存处理函数，避免每次渲染时创建新的函数实例，进一步优化组件渲染性能。

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