Question

我正在为项目使用react admin，我需要向用户添加说明：允许admin向任何用户添加/编辑，只有用户自己可以编辑自己的说明。我能够向已登录的用户显示“编辑”按钮，但是每次它到达实际的编辑页面时，该用户ID都将变为未定义状态，并且会将我路由到错误的网址错误页面。我是反应和反应管理员的新手，所以我不太了解是什么导致它变得不确定。

谢谢！

//in userList.js
export const UserList = ({ permissions, ...props }) => (

    <List {...props} bulkActionButtons={false} sort={{ field: 'display_name', order: 'ASC'}} >
        <Datagrid>

            <TextField source="display_name" label="User Name" />
            <RoleField  source="role" label="User Role" />
            <TextField source="description" label="Description"/>
            <BooleanField source="active" />
            <FormDataConsumer>
                {({ formData }) => (formData.id === JSON.parse(user_info).id) &&

                <EditButton/>
                }

            </FormDataConsumer>
            {permissions === "administrator"  &&<EditButton />}
        </Datagrid>
    </List>
);

//in useredit.js
export const UserEdit = ({permissions, ...props}) => (
    <Edit {...props}>
        <SimpleForm toolbar={<SaveOnlyToolbar />}>
            <DisabledInput source="display_name" />
            <DisabledInput source="distinguished_names" />

            <TextInput resource="description" label="Description"/>
            <FormDataConsumer>
                {({ formData }) => formData.is_only_admin ? 
                    <React.Fragment>
                        <DisabledInput source="role" />
                        <DisabledInput source="active" />
                    </React.Fragment>
                    :
                    <React.Fragment>
                        <SelectInput source="role" label="Role"  choices={RoleChoices}/>
                        <BooleanInput source="active" />
                    </React.Fragment>
                }
            </FormDataConsumer>
        </SimpleForm>
    </Edit>
);

//in app.js
  const content = () => {
      return (
        <Admin
          authProvider={authProvider}
          dataProvider={dataProvider}
          customRoutes={[
            <Route exact path="/help" component={Help}/>,
            <Route exact path="/" component={Dashboard}/>]}
          loginPage={false}
        >
          {role => [
            (role === 'administrator' || role === 'read_only' || role === 'user') ? <Resource name='user' list={UserList} icon={PeopleIcon} edit={role === 'administrator' || role === 'user' ? UserEdit : null}/> : null,
          ]}
        </Admin>
      );
    }
  return <>{content()}</>;
};

export default App;

Answer 1

<FormDataConsumer>组件仅在以下形式内起作用：<SimpleForm>, <TabbedForm>和其他形式。在<List>组件中将无法使用。

react admin

1 个答案: