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

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
添加回答
舉報(bào)