React限制了渲染的數量，以防止重新渲染過多的無限回圈

我的主要座右銘是使用暗模式功能。在這種情況下，我從 app.js 獲取一個 Prop 并將其分配給狀態 pMode 并且我正在嘗試使用 setPmode 方法更改導航欄的類，該方法在 Input 標簽的 onclick 中用作三元，我收到錯誤的

錯誤：重新渲染太多。React 限制了渲染的數量以防止無限回圈。

import React,{useState} from 'react';

export default function Navbar(props) {
    let [pMode,setPmode] = useState(props.Mode);
    return (
        <>
            <nav className={`navbar navbar-expand-lg navbar-${pMode} bg-${pMode}`}>
                <div className="container-fluid">
                    <a className="navbar-brand" href="/">Navbar</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse " id="navbarNav">
                        <ul className="navbar-nav mx-auto">
                            <li className="nav-item">
                                <a className="nav-link active" aria-current="page" href="/">Home</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Features</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Pricing</a>
                            </li>
                        </ul>
                        <div className="form-check form-switch">
                            <input className="form-check-input" onClick={pMode=== "light"? setPmode("dark") : setPmode("light")} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{pMode} mode</label>
                        </div>
                    </div>
                </div>
            </nav>
        </>
    );
}

uj5u.com熱心網友回復：

此箭頭功能有助于無限重新渲染。

onClick={()=>pMode=== “光”？設定模式（“暗”）：設定模式（“亮”）}

import React,{useState} from 'react';

export default function Navbar(props) {
    let [pMode,setPmode] = useState(props.Mode);
    return (
        <>
            <nav className={`navbar navbar-expand-lg navbar-${pMode} bg-${pMode}`}>
                <div className="container-fluid">
                    <a className="navbar-brand" href="/">Navbar</a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse " id="navbarNav">
                        <ul className="navbar-nav mx-auto">
                            <li className="nav-item">
                                <a className="nav-link active" aria-current="page" href="/">Home</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Features</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Pricing</a>
                            </li>
                        </ul>
                        <div className="form-check form-switch">
                            <input className="form-check-input" onClick={()=>pMode=== "light"? setPmode("dark") : setPmode("light")} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{pMode} mode</label>
                        </div>
                    </div>
                </div>
            </nav>
        </>
    );
}

uj5u.com熱心網友回復：

您需要稍微修改onClick功能

<input
 className="form-check-input"
 onClick={() => setPMode((prev) => prev === 'light' ? 'dark' : 'light')}
 type="checkbox"
 role="switch"
 id="flexSwitchCheckDefault" />

之前的問題是您的 onClick 是函式呼叫而不是函式。所以每次渲染組件時，都會執行函式呼叫，這會導致狀態發生變化，然后重新渲染。另外當你的新狀態依賴于之前的狀態時，建議使用一個函式來設定狀態

uj5u.com熱心網友回復：

onClick={()=>{pMode=== "light"? setPmode("dark") : setPmode("light")}}

如果你想在 onclick 里面執行代碼，你應該使用箭頭函式。

標籤：javascript反应反应钩子

上一篇：條件改變后如何使用鉤子重新渲染？

下一篇：知道為什么我的組件沒有在條件塊中呈現，而是獨立呈現嗎？