如何在反应中多次渲染组件

Question

嗨，我是新手，正在寻找一些帮助来弄清楚在调用函数（调用父函数的子函数）时如何呈现我的组件。下面是我的 jsx 代码。

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';


const ProfilePage = () => {

    var user = useContext(UserContext);
    const [canRender, setCanRender] = useState(false);
    var userUpdatedData = null;
    var userName = null;
    var city = null;
    var email = null;
    var userId = null;
    var imgSrc = null;

    if (user.id == null || user.userDetails == null || user.imgSrc == null) {
        user.id = localStorage.getItem('LoggedInUserId');
        user.userDetails = localStorage.getItem('LoggedInUserDetails');
        user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');
    } 

    const userDetails_Data = (data) => {        
        userUpdatedData = data;        
        if (userUpdatedData != null) {
            user.id = localStorage.getItem('LoggedInUserId');
            if (JSON.parse(userUpdatedData)[0].userDetails_successful) {
                setCanRender(true);                
                user.userDetails = JSON.parse(userUpdatedData)[0].userDetails;
                user.imgSrc = JSON.parse(userUpdatedData)[0].imageSrc; 
                console.log('User Updated Data status from parent-->', JSON.parse(userUpdatedData)[0].userDetails_successful);
                localStorage.setItem('LoggedInUserDetails', JSON.stringify(user.userDetails)); 
                localStorage.setItem('LoggedInUserImageSrc', user.imgSrc);                
            } else {
                console.log('User Updated Data status--> False');
            }
        }
    }
    
    if (userUpdatedData == null && !canRender) {
        userName = JSON.parse(user.userDetails)[0].name;
        city = JSON.parse(user.userDetails)[0].city;
        email = JSON.parse(user.userDetails)[0].email;
    } else {
        userName = user.userDetails[0].name;
        city = user.userDetails[0].city;
        email = user.userDetails[0].email;
    }
    
    userId = user.id;
    imgSrc = user.imgSrc;

    if (canRender) {
        return (
            <React.Fragment>                
                <Header />
                <Grid container>
                    <Grid item xs={6} style={{ textAlign: 'center' }}>
                        <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                    </Grid>
                    <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                        <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                    </Grid>
                </Grid>
            </React.Fragment>
        );
    }
    else {
        return (
            <React.Fragment>
                <Header />
                <Grid container>
                    <Grid item xs={6} style={{ textAlign: 'center' }}>
                        <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                    </Grid>
                    <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                        <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                    </Grid>
                </Grid>
            </React.Fragment>
        );
    }
}

export default ProfilePage;

这里 canRender 设置为 true，当子 useEffect 响应为 true 并且我能够第一次渲染组件时。下面是子 useEffect jsx 代码。

 useEffect(() => {
        
        console.log('User Details from Profile Page Form' + JSON.stringify(props.userList))
        props.userList.map((record, index) => {
                        
            if (record.userDetails_successful) {  
                props.userDetailsData(JSON.stringify(props.userList));
                console.log('User Details status from child-->', record.userDetails_successful);                
            }            
        })       
        
    }, [props.userList])

我只想在子 useEffect 挂钩发生变化时调用我的 UserDetails 组件，并立即在屏幕上更新详细信息而无需重新加载。我希望你能理解我在这里面临的问题。如果您需要更多信息，请告诉我。

Answer 1

我已经通过修改状态解决了上面的问题。下面是我的 jsx 代码。

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';


const ProfilePage = () => {

    var user = useContext(UserContext);
    const [, setCanRender] = useState(0);
    var userName = null;
    var city = null;
    var email = null;
    var userId = null;
    var imgSrc = null;    

    user.id = localStorage.getItem('LoggedInUserId');
    user.userDetails = localStorage.getItem('LoggedInUserDetails');
    user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');


    const userDetails_Data = (userDetails_successful, userDetails, imgSrc) => {

        user.id = localStorage.getItem('LoggedInUserId');
        if (userDetails_successful) {            
            localStorage.setItem('LoggedInUserDetails', JSON.stringify(userDetails));
            localStorage.setItem('LoggedInUserImageSrc', imgSrc);            
            setCanRender(c => c + 1);

        } else {
            console.log('User Updated Data status--> False');
        }

    }

    userName = JSON.parse(user.userDetails)[0].name;
    city = JSON.parse(user.userDetails)[0].city;
    email = JSON.parse(user.userDetails)[0].email;

    userId = user.id;
    imgSrc = user.imgSrc;


    return (
        <React.Fragment>
            <Header />           
            <Grid container>
                <Grid item xs={6} style={{ textAlign: 'center' }}>
                    <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                </Grid>
                <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                    <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                </Grid>
            </Grid>
        </React.Fragment>
    );
}

export default ProfilePage;

如何在反应中多次渲染组件

How to render a component multiple times in react

reactjs

react-redux

react-hooks