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

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

详细解释我想要实现的目标：

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

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

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;
    

我的

auth.js

如下所示：

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

---

您的函数

isAdmin

似乎没有直接返回结果，当它完成执行时，

DataRequestEnhancedForm

将被呈现。请尝试将

isAdmin

函数设置为异步，如下所示：

export const isAdmin = async (user) => {

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

}

---

您是否尝试过对函数返回的内容进行安慰？也许它没有返回你期望它返回的东西。要确定这一点，请执行：

console.log（isAdmin（user））

并查看您得到了什么。是的。它返回的是真的。您说它没有返回

AdminDataRequestEnhancedForm

，那么它返回的是什么@Tan？@祝福它将我带到

DataRequestEnhancedForm

组件。当我在

AdminDataRequestEnhancedForm

中做了一些更改时，即使

isAdmin（用户）也没有显示更改

是正确的。您的函数

isAdmin

似乎是

异步的

，并且不直接返回结果，当它完成执行时，

DataRequestEnhancedForm

将被呈现。尝试将该

isAdmin

函数设置为异步。进行此更改后，我得到了

未捕获的引用错误：未定义regeneratorRuntime

错误。这是您的

babel

配置的问题。勾选这个，你介意把答案也投一票吗？那会有帮助的。干杯