反应错误：重新渲染太多。 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) const user = false :- 每次组件重新渲染时都会发生此分配，所以我认为用户应该是 React 状态而不是简单的变量。

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