React报错Too many re-renders：主题切换引发无限渲染问题求助

错误原因 #

你在组件return语句里直接调用toggle(props.theme)，导致每次组件渲染时都会执行该函数。而toggle内部调用setTheme更新状态，状态变化又会触发组件重新渲染，形成无限循环，最终触发React的重渲染限制错误。

解决方案 #

方案1：使用useEffect监听props变化 #

通过useEffect钩子监听props.theme的变化，仅当props.theme改变时才执行主题切换逻辑，避免不必要的重渲染：

import React, { useState, useEffect } 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"
            })
        }else if(option === "dark"){
            setTheme({
                color: "white",
                backgroundColor: "black",
                width: "90%",
                marginInline: "auto"
            })
        }else{
            setTheme({
                color: "white",
                backgroundColor: "#032f3c",
                width: "90%",
                marginInline: "auto"
            })
        }
    }

    useEffect(() => {
        toggle(props.theme)
    }, [props.theme])

  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>
  )
}

方案2：直接计算样式（更简洁） #

无需额外维护state，直接根据props.theme计算样式对象，减少状态同步的复杂度：

import React from 'react'

export default function About(props) {
    const getThemeStyle = (option) => {
        switch(option) {
            case "light":
                return {
                    color: "black",
                    backgroundColor: "white",
                    width: "90%",
                    marginInline: "auto"
                }
            case "dark":
                return {
                    color: "white",
                    backgroundColor: "black",
                    width: "90%",
                    marginInline: "auto"
                }
            default:
                return {
                    color: "white",
                    backgroundColor: "#032f3c",
                    width: "90%",
                    marginInline: "auto"
                }
        }
    }

    const theme = getThemeStyle(props.theme)

  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>
  )
}

额外注意点 #

• React组件中需使用className替代原生HTML的class属性，否则Bootstrap样式可能无法正常生效。
• 方案2无需维护state，更适合仅依赖props的主题切换场景，避免状态不同步问题。

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