為什么我的組件會拋出“太多重新渲染”錯誤？

Question

錯誤：重新渲染過多。 React 限制了渲染的數量以防止無限循環。

我找不到循環在哪里，我設法檢查狀態是否不同於“null”我只能渲染圖表並避免錯誤，但它仍然存在，有人可以幫助我嗎？

import React from "react";
import { useState } from "react";
import { Chart } from "react-google-charts";

export const StatusChart = (pokemon) => {
  const [hp, setHp] = useState(null);
  const [attack, setAttack] = useState(null);
  const [defense, setDefense] = useState(null);
  const [specialAtack, setSpecialAtack] = useState(null);
  const [specialDefese, setSpecialDefese] = useState(null);
  const [speed, setSpeed] = useState(null);

  console.log(
    pokemon.pokemon.map((e) => {
      console.log(e.base_stat);
      switch (e.stat.name) {
        case "hp":
          setHp(e.base_stat);
          break;
        case "attack":
          setAttack(e.base_stat);
          break;
        case "defense":
          setDefense(e.base_stat);
          break;
        case "special-attack":
          setSpecialAtack(e.base_stat);
          break;
        case "special-defense":
          setSpecialDefese(e.base_stat);
          break;
        case "speed":
          setSpeed(e.base_stat);
          break;
      }
    })
  );

  const data = [
    ["Status", "Value", { role: "style" }],
    ["HP", hp, "red"],
    ["Atack", attack, "orange"],
    ["Defese", defense, "green"],
    ["Special Atack", specialAtack, "gold"],
    ["Special Defense", specialDefese, "purple"],
    ["Speed", speed, "blue"],
  ];

  return (
    <>
      {hp ||
      attack ||
      defense ||
      specialAtack ||
      specialDefese ||
      speed === null ? null : (
        <Chart
          chartType="ColumnChart"
          width="100%"
          height="300px"
          data={data}
        />
      )}
    </>
  );
};

Github 鏈接： https://github.com/yjdutra/pokedex-pokeapi

Answer 1

這個帶有 map 的 console.log 同時執行許多 setState，導致 UI 在您擁有的每個“口袋妖怪”實體上重新渲染。 這導致了錯誤。