如何修复React无限渲染循环

Question

我有一个相对简单的 React 视图，目前会导致无限循环发生。我尝试尽可能使用 useState 。 下面是代码。导致问题的是组件 AnvendelsesDisplay，从而导致以下错误：

 Too many re-renders. React limits the number of renders to prevent an infinite loop. renderWithHooks@http://localhost:3000/static/js/bundle.js:30378:19

import { useState, useEffect } from "react"
import { Container } from 'react-bootstrap';
import BBRMapping from "./BBRMapping";

const AnvendelseDisplay = ({type, anvendelse}) => { 
    const [ a, setA ] = useState(0);
    
    const bbrmap = new BBRMapping();
    const val = bbrmap.MapBBRCode(type, anvendelse);
    setA(val);
    return (
        <>
        <p>Anvendelse: {a}</p>
        </>
    );
}

const ResultsDisplay = (props) => { 

    const hest = props.hest;
    const bbrmap = new BBRMapping();

    return(
        <>
            <Container>
                <h2>Grund</h2>
                <p>Grundareal: {hest.grund.grundareal.grundareal} kvm</p>
                <p>BFE-nummer: {hest.grund.grundareal.bfeNummer}</p>
           </Container>
            {hest.enheder.map((h, i) => {
                return(
                <Container>
                    <h2>Enhed</h2>
                    <p>Enhedensanvendelse: {h.enh020EnhedensAnvendelse}</p>
                    <p>Antal vaerelser: {h.enh031AntalVærelser}</p>
                    <p>Antal badevaerelser: {h.enh066AntalBadev\u00e6relser}</p>
                    <p>Antal vandskyllede toiletter: {h.enh065AntalVandskylledeToiletter}</p>
                    <p>Boligtype: {bbrmap.MapBoligtype(h.enh023Boligtype)}</p>
                    <p>Enhedens samlede areal: {h.enh026EnhedensSamledeAreal}</p>
                    <p>Areal til beboelse: {h.enh027ArealTilBeboelse}</p>
                    <p>Toiletforhold: {bbrmap.MapToiletforhold(h.enh032Toiletforhold)}</p>
                    <p>Badeforhold: {bbrmap.MapBadeforhold(h.enh033Badeforhold)}</p>
                    <p>Koekkenforhold: {bbrmap.MapKoekkenforhold(h.enh034K\u00f8kkenforhold)}</p>
                    <p>Energiforsyning: {bbrmap.MapEnergiforsyning(h.enh035Energiforsyning)}</p>
                </Container>
                )
            })}
            {hest.bygninger.map((h, i) => {
                return(
                <Container>
                    <h2>Bygning</h2>
                    <AnvendelseDisplay 
                        anvendelse={h.byg021BygningensAnvendelse} 
                        type="BygAnvendelse" />
                    <p>Tagdaekningsmateriale: {bbrmap.MapTagdaekningsmateriale(h.byg033Tagd\u00e6kningsmateriale)}</p>
                    <p>Ydervaeggens materiale: {bbrmap.MapYdervaeggensMateriale(h.byg032Yderv\u00e6ggensMateriale)}</p>
                    <p>Samlede boligareal: {h.byg039BygningensSamledeBoligAreal}</p>
                    <p>Varmeinstallation: {bbrmap.MapVarmeinstallation(h.byg056Varmeinstallation)}</p>
                    <p>Opfoerelsesaar: {h.byg026Opførelsesår}</p>
                    <p>Antal etager: {h.byg054AntalEtager}</p>
                    <p>Koordinat: {h.byg404Koordinat} (Koordinatsystem: {h.byg406Koordinatsystem})</p>
                    <p>Bebygget areal: {h.byg041BebyggetAreal}</p>
                </Container>
                );
            })}
        </>
    );
}      

export default ResultsDisplay;

我无法让 AnvendelsesDisplay 正常工作。

BBRMapping.MapBBRCode() 的代码在这里：

    MapBBRCode(domain, key) 
    { 
        fetch(`/bbrkode/${domain}/${key}`)
                .then((response) => response.json())
                .then((data) => {
                        console.log(`MapBBRCode: ${data.value}`);
                        return data.value;
                })

    }

Answer 1

您在每个渲染上设置状态：

setA(val);

更新状态会触发重新渲染，然后您的代码更新状态，这会触发重新渲染，从而更新状态，依此类推...

您可以使用

useEffect

和一个空的依赖数组来在组件首次加载时执行一次此操作：

useEffect(() => {
  const bbrmap = new BBRMapping();
  const val = bbrmap.MapBBRCode(type, anvendelse);
  setA(val);
}, []);