React报错Too many re-renders无限重渲染触发原因咨询

报错根因 #

你遇到的Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.报错，是由组件函数体顶层的冗余状态更新调用触发的：

• 函数组件每次渲染都会完整执行函数内部所有顶层代码
• 你在useEffect外部、组件顶层直接写了setMovies(movies)，这行代码每次渲染都会执行
• 调用setMovies会触发组件重新渲染，重渲染又会再次执行顶层的setMovies，形成「渲染→更新状态→重渲染→再次更新状态」的死循环，最终触发React的渲染次数保护机制抛出错误
• 这行代码本身没有任何实际作用：你已经在挂载阶段的useEffect里拿到接口返回数据后，正确调用了setMovies更新电影列表状态。

修复方法 #

直接删除组件顶层冗余的setMovies(movies)这行代码即可解决报错。

额外提示：你当前列表渲染Movie组件时没有绑定列表key、也没有传入电影数据，会触发React列表渲染警告，修复后的完整参考代码如下：

import logo from './logo.svg';
import './App.css';
import Movie from './components/Movie'
import React, { useEffect, useState } from 'react';

const FEATURED_API = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1"
const IMG_API = "https://image.tmdb.org/t/p/w1280"
const SEARCH_API = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="

function App() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetch(FEATURED_API)
    .then((res) => res.json())
    .then((data) => {
      console.log(data)
      setMovies(data.results);
    });
  },[])

  return (
    <div>
      {movies.length > 0 && movies.map((movie) => (
        <Movie key={movie.id} {...movie} />
      ))}
    </div>
  )
}
export default App;

通用避坑规则 #

所有状态更新函数setXxx，不要直接写在函数组件的顶层执行，需要放在：

• 事件回调函数中
• useEffect的回调内部，且正确配置依赖项
• 条件判断分支内，确保不会每次渲染都无差别触发状态更新

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