React组件出现Too many re-renders无限循环报错求助

错误原因 #

你直接在组件函数体内调用setArtikel，每次组件渲染时都会执行这个状态更新函数，而setState会触发组件重新渲染，由此形成渲染→更新状态→重新渲染→再更新状态的无限循环，触发React的防死循环限制。

解决方案 #

1. 初始化静态数据 #

如果是静态初始数据，直接将值传入useState的初始参数即可，无需单独调用setState：

import React from 'react';

function ArtikelPage() {
  // 直接把初始数据作为useState的默认值
  const [artikel, setArtikel] = React.useState(['ari', 'ahmad', 'putra']);

  return (
    <div>
      <p className="artikel">Artikel</p>
      {artikel.map((artikel2, index) => (
        // 循环元素必须添加唯一key，避免React警告（建议用数据自身的唯一id，index仅作临时方案）
        <div key={index} className="card">
          <img src={artikel2} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{artikel2}</h5>
            <p className="card-text">{artikel2}</p>
            <a href="ww" className="btn btn-primary">Lihat</a>
          </div>
        </div>
      ))}
    </div>
  );
}

export default ArtikelPage;

2. 异步获取数据（如注释中的getAllData） #

如果需要从接口获取数据，用useEffect包裹异步请求，设置空数组作为依赖，确保请求仅在组件挂载时执行一次：

import React from 'react';
import { getAllData } from '../../data/data-source';

function ArtikelPage() {
  const [artikel, setArtikel] = React.useState([]);

  // useEffect+空依赖数组，仅在组件首次渲染时执行一次请求
  React.useEffect(() => {
    getAllData('artikel')
      .then((result) => {
        setArtikel(result);
      });
  }, []);

  return (
    <div>
      <p className="artikel">Artikel</p>
      {artikel.map((artikel2, index) => (
        <div key={index} className="card">
          <img src={artikel2} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{artikel2}</h5>
            <p className="card-text">{artikel2}</p>
            <a href="ww" className="btn btn-primary">Lihat</a>
          </div>
        </div>
      ))}
    </div>
  );
}

export default ArtikelPage;

额外提示 #

循环渲染React元素时，必须给每个元素添加唯一的key属性，这能帮助React高效识别元素变化，避免不必要的重渲染和警告。如果数据有自身的唯一ID（如后端返回的id字段），优先使用ID作为key，而非数组索引。

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