代码之家 › 专栏 › 技术社区 › jainyashit

重新渲染过多。React限制渲染次数,以防止React中出现无限循环

react-router routes reactjs javascript

jainyashit · 技术社区 · 1 年前

import React from 'react'
import { useState } from 'react'

export default function About(props) {
    const [theme,setTheme] = useState(null)

    function toggle(option){
        if(option==="light"){
            setTheme({
                color:"black",
                backgroundColor:"white",
                width:"90%",
                marginInline:"auto"

            })
            console.log(theme,option==="light");

            // return theme
        }else if(option==="dark"){
            setTheme({
                color:"white",
                backgroundColor:"black",
                width:"90%",
                marginInline:"auto"
            })
            console.log(theme,option==="light");
            // return theme

        }else{
            setTheme({
                color:"white",
                backgroundColor:"#032f3c",
                width:"90%",
                marginInline:"auto"
            })
            console.log(theme,option==="light");
            // return theme
        }

    }
  return (
    <div >
        {toggle(props.theme)}
        <div class="accordion" id="accordionExample" >
            <div class="accordion-item" style={theme}>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample" >
                <div class="accordion-body" >
                    /content/
                </div>
                </div>
            </div>

我正试图根据(props.theme)的值来更改页面的主题但当我调用函数toggle作为返回时,它会说render too times,但在不调用函数的情况下,该函数组件会在页面上显示bootstrap框架的默认值。

1 回复 | 直到 1 年前

Lovlesh 1 年前

Return语句直接调用toggle函数: {toggle(props.theme)} .
每次渲染此组件时,都会调用切换函数,该函数使用 setTheme .
由于更新状态会触发重新渲染,这最终会导致渲染和状态更新的无限循环。
实际使用它可以解决这个问题。

import React, { useState, useEffect } from 'react';

export default function About(props) {
    const [theme, setTheme] = useState(null);

    useEffect(() => {
        // Set the initial theme based on props
        if (props.theme === 'light') {
            setTheme({
                color: 'black',
                backgroundColor: 'white',
                width: '90%',
                marginInline: 'auto'
            });
        } else if (props.theme === 'dark') {
            setTheme({
                color: 'white',
                backgroundColor: 'black',
                width: '90%',
                marginInline: 'auto'
            });
        } else {
            setTheme({
                color: 'white',
                backgroundColor: '#032f3c',
                width: '90%',
                marginInline: 'auto'
            });
        }
    }, [props.theme]); // Only run this effect when props.theme changes

    return (
        <div>
            <div className="accordion" id="accordionExample">
                <div className="accordion-item" style={theme}>
                    <div
                        id="collapseOne"
                        className="accordion-collapse collapse show"
                        data-bs-parent="#accordionExample"
                    >
                        <div className="accordion-body">/content/</div>
                    </div>
                </div>
            </div>
        </div>
    );
}