React集成useMoralis时initialState/loggedState无返回 刷新页面useState重置

• 误用useEffect钩子：useEffect用于处理组件副作用，它的返回值是供React调用的清理函数，你试图将返回的JSX赋值给变量渲染，自然不会得到任何有效内容。
• useState本身为内存级状态存储，页面刷新后浏览器内存清空，状态自动恢复为初始值，属于React的正常表现。
• 你当前代码没有等待Moralis用户状态加载完成就做判断，可能会偶发判断不准的问题。

import React from 'react'
import './Home.css'
import {Card, Figure} from 'react-bootstrap'
import Data from './Data'
import {useMoralis} from 'react-moralis'


function Today()   {
    const { user, isLoading }  = useMoralis();

    const initialState = (
        <div className='status'>
             <p>Guest</p>
         </div>
    )
     const loggedState =  (
        <div className='status'>
               <p>@</p>
           </div>
     )

    const current = new Date();
    const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;

    // 可选：用户状态加载中展示加载态
    if (isLoading) return <div>加载中...</div>

    return(
        <div>
            <div className='top'>
                <Card style={{ width: '100%' }} >
                    <Card.Body>
                            <Card.Title><span className='card-titled'>Home</span></Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">Dashboard</Card.Subtitle>
                            <Card.Text>
                                Date: {date}
                            </Card.Text>
                    </Card.Body>
                    <Card.Body className='bannerlogo'>
                            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Ethereum_logo_2014.svg/73px-Ethereum_logo_2014.svg.png' alt="Ethereum logo" width="60" height="90" />
                    </Card.Body>
                    <Card.Body className='profilepic'>
                    <Figure>
                        <Figure.Image
                            width={60}
                            height={70}
                            alt="Profile"
                            src="https://3.bp.blogspot.com/-UI5bnoLTRAE/VuU18_s6bRI/AAAAAAAADGA/uafLtb4ICCEK8iO3NOh1C_Clh86GajUkw/s320/guest.png"
                        />
                         <Figure.Caption>
                            {/* 直接根据user值判断渲染内容，不需要useEffect */}
                            {user ? loggedState : initialState}
                         </Figure.Caption>
                        </Figure>
                    </Card.Body>
                </Card>
            </div>
            <Data/>
        </div>
    )
}
export default Today

如果你需要在页面刷新后保留自定义的非Moralis状态，可以将状态存入localStorage，组件初始化时从localStorage读取值作为useState的初始值即可。

内容的提问来源于stack exchange，提问作者thomas305