反应错误：重新渲染太多。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 = false2） - 这意味着每当组件呈现时，都会调用，并且状态是根据您的逻辑设置的。现在，由于状态已设置，组件将重新呈现，这将再次触发所有内容，并且循环将继续。要解决这个问题，请像这样做：-<h1> {greetingMessage()} Random Dude!</h1>greetingMessage()useEffect//Just after your state definitionsuseEffect(()=>{&nbsp; &nbsp; &nbsp; &nbsp; if (user) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setGreeting("Welcome")&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setGreeting("You dont belong here")&nbsp; &nbsp; &nbsp; &nbsp; }},[])所以你的最终代码可以是这样的：-function Main() {&nbsp; &nbsp; const [greeting, setGreeting] = React.useState("Hello")&nbsp; &nbsp; //Implement the logic for how you want to set this user state&nbsp; &nbsp; const [user,setUser] = React.useState(false)&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; if (user) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setGreeting("Welcome")&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setGreeting("You dont belong here")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, [])&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1> {greeting} Random Dude!</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Cards />&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; )}我最好的选择是，在你直接进入代码之前，先浏览一次关于钩子的 React 文档。这些会为你清除很多事情：-https://reactjs.org/docs/hooks-intro.html

Answer 2

看看这是否有效import React from 'react'import Cards from './cards'function Main() {&nbsp; &nbsp; const user = false&nbsp; &nbsp; const [greeting, setGreeting] = React.useState(user ? "Welcome" : "You dont belong here")&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="d-flex flex-wrap flex-md-nowrap pt-2 mt-2 mb-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1> {greeting} Random Dude!</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Cards />&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; )}export default Main