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

看看是否可行

Double

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

2 个答案: