typescript react-intl:字符串数组的formatMessage

olmpazwi  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(215)

我有几个界面,在这些界面中有一个界面是用来“显示用户”的,还有一个字段叫做“角色”,它代表了一个用户角色的数组,而我想翻译这个栏目,它实际上是通过这几行来翻译的:

tableDataMapper={(rows) => {
                    return rows?.map((row: any, index) => {
                        console.log('row: ', rows);
                        return {
                            ...row,
                            roleNames: formatMessage({
                                id: formatMessage({ id: row?.roleNames }),
                            })
                        };
                    });
                } }

但问题是,如果数组包含多个元素,它不会翻译它,就像这个图片一样,它会翻译除了红色指示的行之外的所有行。

import { FunctionComponent, useContext } from 'react';
import user from '../../../../api/nuclearMedicineApi/services/User/index';
import Scaffold from '../../../common/scaffold';
import UserForm from './form/index';
import { userColumns } from './data';
import { selectMapper } from '../../../../utils/mappers';
import moment from 'moment';
import { indexFilters } from './filters';
import { useQuery } from 'react-query';
import {
    AuthContext,
    IAuthContext,
} from '../../../../contexts/auth-context';
import { FormattedMessage, useIntl } from 'react-intl';

interface UsersProps { }

const Users: FunctionComponent<UsersProps> = () => {

    const { formatMessage } = useIntl();

    const auth = useContext<IAuthContext>(AuthContext);

    const filterOptionsData = useQuery('userFilterOptions', () =>
        [{key: 'key', value: 0, label: 'label' }],
    );

    let userListColumns = userColumns;
    userListColumns = auth.userData?.roleNames?.some(
        (role) => role !== 'ADMIN',
    )
        ? userListColumns.filter(
            (item) => item.dataSelector !== 'roleNames',
        )
        : userListColumns;
        
    return (
        <>
            <Scaffold
                createFunc={user.userCreate}
                getFunc={user.userGet}
                getAllFunc={user.userGetAll}
                filterColumns={indexFilters}
                updateFunc={user.userUpdate}
                deleteFunc={user.userCreate}
                switchActivation
                create
                switchActivationFunc={user.userSwitchActivation}
                tableColumns={userListColumns}
                filterOptions={filterOptionsData.data}
                dataName='user'
                formContent={UserForm}
                fullWidthFrom
                exportToExcelFunc={user.userGetExcelReport}
                defaultSizePaination={10}
                pageSizeOptions={[10, 20, 50, 100]}
                FormSubmitMapper={(data) => {

                    return {
                        ...data,
                        password: data.password ?? null,
                        ...selectMapper(['patientId', 'patient'], data),
                    };
                } }
                tableDataMapper={(rows) => {
                    return rows?.map((row: any) => {
                        console.log('row: ', rows);
                        return {
                            ...row,
                            roleNames: formatMessage({
                                id: formatMessage({ id: row?.roleNames }),
                            })
                               
                    
                        };
                    });
                } }
                FromDataMapper={(data) => {
                    return {
                        ...data,
                        lastModificationTime: moment(
                            new Date(data.lastModificationTime)
                        ).format('YYYY-MM-DD, h:mm a'),
                        creationTime: moment(
                            new Date(data.creationTime)
                        ).format('YYYY-MM-DD, h:mm a'),
                    };
                } }
                mainPermissionName='User' approveFunc={function (data: any): Promise<any> {
                    throw new Error('Function not implemented.');
                } } rejectFunc={function (data: any): Promise<any> {
                    throw new Error('Function not implemented.');
                } }            />
        </>
    );
};

export default Users;
j0pj023g

j0pj023g1#

我假设您希望显示用逗号分隔的各个角色的翻译(例如,如果A翻译为roleAB翻译为roleB,则roleNames: ["A", "B"]应该显示为"roleA, roleB")。
由于您有roleNames: ["SystemAdmin", "NationalRegistry"],因此只需执行roleNames.map(roleName => formatMessage({ id: roleName })).join(', ')即可

相关问题