根据用户类型不显示正确的反应组件

Question

我在根据用户类型显示单独的组件时遇到了一些问题。

我想要实现的目标的详细说明：

我遇到问题的代码片段如下：

const addDataRequest = this.state.addDataRequestVisible ? (
            <div className="main-page-section">
               
                <Growl ref={this.growl}/>
                {isAdmin(user)? (
                
                <AdminDataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
               
                ) : (
               <DataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
                )
              }
            </div>
        ) : null;

目前，就表单内容而言，DataRequestFormJS 和AdminDataRequestForm 是完全相同的表单。所以根据用户角色，如果是管理员，我想显示 AdminDataRequestEnhancedForm 组件，如果它不是管理员，我想显示 DataRequestEnhancedForm 组件。但是尽管如此，我已经对 isAdmin 进行了特定的检查，如上面的代码片段所示，它没有显示 AdminDataRequestEnhancedForm 组件对于管理员用户。我想知道我在做什么错？跟状态变量-this.state.addDataRequestVisible有关系吗？

完整代码如下：

import {DataRequestEnhancedForm} from "./DataRequestFormJS";
import {AdminDataRequestEnhancedForm} from "./AdminDataRequestForm";
import {isAdmin} from './auth';

class DataRequest extends React.Component<any, any> {
    private growl = React.createRef<Growl>();

    constructor(props) {
        super(props);
       
        this.state = {
            result: '',
            addDataRequestVisible: false,
            addProjectVisible: false,
            //For admin specific
            addAdminDataRequestVisible: false,
            addAdminProjectVisible: false
        };

        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
        this.addProjectOpen = this.addProjectOpen.bind(this)
        this.addProjectClose = this.addProjectClose.bind(this)
    }

    handleSubmit = (values) => {

       let responseData = []
        axios.post('upms/saveData', {
            
        }).then((response) => {
            console.log('response', response)
            responseData = response.data

            this.setState({
                addDataRequestVisible: false,
                dataRequestFormVisible: false,
                dataRequestGridVisible: true,
                selectedDataRequest: []
            }, () => {
                this.growl.current.show({
                    severity: 'success',
                    summary: 'Save Successful',
                    detail: 'Data Request has been created'
                })
            })
        }).catch((err) => {
            this.growl.current.show({
                severity: 'error',
                summary: 'Save Unsuccessful',
                detail: 'Could not add Data Request'
            })
        })
    }

    handleCancel = event => {
        console.log('In handleCancel....')
        if (event) {
            this.setState({ addDataRequestVisible: false})
        }
    }

    addProjectOpen = event =>{
        if (event) {
            this.setState({ addProjectVisible: true})
        }
    }

    addProjectClose = event =>{
        console.log('In addProjectClose....' + event)
        if (event) {
            this.setState({ addProjectVisible: false})
        }
    }

    render() {
        const user = JSON.parse(sessionStorage.getItem('loggedInUser'))
        let url = isAdmin(user) ? 'url1' : 'api/personnels/' + user.id + '/url2'

        const defaultView = this.state.addDataRequestVisible?null: (
            <div className="data-request-main-section">
                <Growl ref={this.growl}/>
                <div className="page-title-section">            
                <Button label="New Data Request" icon="pi pi-plus" className="new-data-req-btn"
                        onClick={(e) => this.setState({ addDataRequestVisible: true})}/>
            </div>
                <DataRequestsDataTable url={url} handleSubmit={this.handleSubmit}/>
            </div>

        )

       
         
        

        const addDataRequest = this.state.addDataRequestVisible ? (
            <div className="main-page-section">
               
                <Growl ref={this.growl}/>
                {isAdmin(user)? (
                
                <AdminDataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
               
                ) : (
               <DataRequestEnhancedForm handleSubmit={this.handleSubmit} addProject={this.addProjectOpen} onCancel={this.handleCancel}/>
                )
              }
            </div>
        ) : null;
       


        const addProjectDialog = this.state.addProjectVisible ? (
            <Dialog visible={true} modal={true} className="add-project-popup"
                    onHide={() => this.setState({addProjectVisible: false})}>
                <div style={{textAlign: 'center'}}>
                    <h3>Add New Project</h3>
                    <AddNewProjectForm closeProject={this.addProjectClose} />
                </div>
            </Dialog>
        ) : null

        return (
            <div className="datareq-page">
                {defaultView}
                {addDataRequest}
                {addProjectDialog}
            </div>
        );
    }
}

export default DataRequest

我的 auth.js 如下所示：

export const isAdmin = (user) => {
    return JSON.parse(sessionStorage.assignees).some(assignee => assignee.id === user.id)
}

Answer 1

你的函数 isAdmin 似乎没有直接 return 结果，当它完成执行时 DataRequestEnhancedForm 将被渲染。尝试像这样使 isAdmin 函数异步：

export const isAdmin = async (user) => {

    let userType = await JSON.parse(sessionStorage.assignees).some(assignee => assignee.id === user.id)
 
    return userType

}

根据用户类型不显示正确的反应组件

Proper react component not showing based on the type of user

javascript

reactjs

react-component