React-admin：react.component 中无法访问的权限答案

【问题标题】：React-admin: permissions not accessible in react.componentReact-admin：react.component 中无法访问的权限
【发布时间】：2019-09-11 13:46:33
【问题描述】：

我正在使用 react-admin 并包含高级教程“从列表页面创建和编辑记录”。本教程使用 react.component 而不是常量。我现在需要根据授权传递的权限对象中的值显示字段。我可以在常量和管理组件中很好地做到这一点，但如果我尝试在 react.component 中访问它，权限始终为空。

class InviteCodeList extends React.Component {
    render() {
        const { permissions,push, classes, ...props } = this.props;
        console.log('permissions');
        console.log(permissions);       
        return (
            <Fragment>
                <List
                    {...props}                    
                    filters={<CustomFilter />} 
                    actions={<CustomActions />}
                    sort={{ field: 'title', order: 'ASC' }}                    
                >
                    <Datagrid>
                        <TextField source="id" />
                        <TextField source="title" />
                        <WithPermissions
                            render={({ permissions }) => (
                                permissions.find(f => f.resource === 'admin') !== undefined
                                    ? <TextField source="invite_code" />
                                    : null
                            )}
                        />                        
                        <ReferenceField source="price_list_id" reference="pricelists">
                            <TextField source="price_list_name" />
                        </ReferenceField>
                        <TextField source="effective_dt" />
                        <DateField source="expiration_dt" />   
                        <EditButton />   
                    </Datagrid>
                </List>

【问题讨论】：

你不应该在这里使用WithPermissions 组件。你能设置一个显示问题的代码框吗？
你说得对，我不需要 WithPmissions。问题在于，由于 auth 调用是异步的，因此在实际 API 调用返回之前，它会为权限返回 null。我添加了对 null 的检查，它现在按预期工作。

标签： reactjs authorization react-admin

【解决方案1】：

这是新的代码段。在 API 调用返回实际数据之前，我没有检查返回的 null。

    <Fragment>
                    <List
                        {...props}                    
                        filters={<CustomFilter />} 
                        actions={<CustomActions />}
                        sort={{ field: 'title', order: 'ASC' }}                    
                    >
                        <Datagrid>
                            <TextField source="id" />
                            <TextField source="title" />                          
                            permissions !== null ? permissions.find(f => f.resource === 'admin') !== undefined
                                        ? <TextField source="invite_code" />
                                        : null : null
                            <DateField source="expiration_dt" />   
                            <EditButton />  
                        </Datagrid>
                    </List>

【讨论】：