第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

反應(yīng)錯(cuò)誤:重新渲染太多。React 限制渲染次數(shù)以防止無限循環(huán)

反應(yīng)錯(cuò)誤:重新渲染太多。React 限制渲染次數(shù)以防止無限循環(huán)

湖上湖 2022-09-02 19:41:49
該代碼最初應(yīng)該只使用一天中的時(shí)間(Date().getHours())和一些條件來顯示不同的問候語。但是,我試圖簡(jiǎn)化代碼以檢查狀態(tài)是否會(huì)更改,它給出了上面提到的相同錯(cuò)誤。如果我不包括設(shè)置狀態(tài)的條件,狀態(tài)會(huì)按原樣顯示。import React from 'react'import Cards from './cards'function Main() {    const [greeting, setGreeting] = React.useState("Hello")    const user = false    if (user) {        setGreeting("Welcome")    } else {        setGreeting("You dont belong here")    }    return (        <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">            <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">                <h1> {greeting} Random Dude!</h1>            </div>            <Cards />        </main>    )}export default Main我也試圖將其包裝在函數(shù)中,但沒有運(yùn)氣,這是有道理的,因?yàn)槊看武秩敬a時(shí),該函數(shù)都會(huì)再次被調(diào)用并循環(huán)import React from 'react'import Cards from './cards'function Main() {    const [greeting, setGreeting] = React.useState("Hello")    const user = false    function greetingMessage() {        if (user) {            setGreeting("Welcome")        } else {            setGreeting("You dont belong here")        }        return (greeting)    }    return (        <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">            <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">                <h1> {greetingMessage()} Random Dude!</h1>            </div>            <Cards />        </main>    )}export default Main
查看完整描述

2 回答

?
偶然的你

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

您需要在事件處理程序或 useEffect 鉤子中執(zhí)行 React 狀態(tài)的設(shè)置。


在你的代碼中發(fā)生的事情是這樣的:-


1) :- 每次組件重新渲染時(shí)都會(huì)發(fā)生這種賦值,所以我認(rèn)為用戶應(yīng)該是 React 狀態(tài),而不是一個(gè)簡(jiǎn)單的變量。const user = false


2) - 這意味著每當(dāng)組件呈現(xiàn)時(shí),都會(huì)調(diào)用,并且狀態(tài)是根據(jù)您的邏輯設(shè)置的。現(xiàn)在,由于狀態(tài)已設(shè)置,組件將重新呈現(xiàn),這將再次觸發(fā)所有內(nèi)容,并且循環(huán)將繼續(xù)。要解決這個(gè)問題,請(qǐng)像這樣做:-<h1> {greetingMessage()} Random Dude!</h1>greetingMessage()useEffect


//Just after your state definitions

useEffect(()=>{

        if (user) {

            setGreeting("Welcome")

        } else {

            setGreeting("You dont belong here")

        }

},[])

所以你的最終代碼可以是這樣的:-


function Main() {


    const [greeting, setGreeting] = React.useState("Hello")

    //Implement the logic for how you want to set this user state

    const [user,setUser] = React.useState(false)



    useEffect(() => {

    if (user) {

            setGreeting("Welcome")

        } else {

            setGreeting("You dont belong here")

        }

    }, [])


    return (

        <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">

            <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">

                <h1> {greeting} Random Dude!</h1>

            </div>

            <Cards />

        </main>

    )

}

我最好的選擇是,在你直接進(jìn)入代碼之前,先瀏覽一次關(guān)于鉤子的 React 文檔。這些會(huì)為你清除很多事情:-


https://reactjs.org/docs/hooks-intro.html


查看完整回答
反對(duì) 回復(fù) 2022-09-02
?
慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

看看這是否有效


import React from 'react'

import Cards from './cards'


function Main() {

    const user = false

    const [greeting, setGreeting] = React.useState(user ? "Welcome" : "You dont belong here")


    return (

        <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">

            <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">

                <h1> {greeting} Random Dude!</h1>

            </div>

            <Cards />

        </main>

    )

}



export default Main


查看完整回答
反對(duì) 回復(fù) 2022-09-02
  • 2 回答
  • 0 關(guān)注
  • 98 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)