反应错误：重新渲染太多。React 限制渲染次数以防止无限循环

Question

该代码最初应该只使用一天中的时间（Date（）.getHours（））和一些条件来显示不同的问候语。但是，我试图简化代码以检查状态是否会更改，它给出了上面提到的相同错误。如果我不包括设置状态的条件，状态会按原样显示。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我也试图将其包装在函数中，但没有运气，这是有道理的，因为每次渲染代码时，该函数都会再次被调用并循环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

Answer 1

您需要在事件处理程序或 useEffect 钩子中执行 React 状态的设置。

在你的代码中发生的事情是这样的：-

1） ：- 每次组件重新渲染时都会发生这种赋值，所以我认为用户应该是 React 状态，而不是一个简单的变量。const user = false

2） - 这意味着每当组件呈现时，都会调用，并且状态是根据您的逻辑设置的。现在，由于状态已设置，组件将重新呈现，这将再次触发所有内容，并且循环将继续。要解决这个问题，请像这样做：-<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>

    )

}

我最好的选择是，在你直接进入代码之前，先浏览一次关于钩子的 React 文档。这些会为你清除很多事情：-

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

Answer 2

看看这是否有效

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