在 Material-Table 渲染属性中使用函数

Question

我需要在材质表列渲染属性中使用自定义函数。该函数被调用，我在控制台上打印了预期的结果，但是，结果根本不会在表中呈现。这是代码：

import React from 'react';
import HraReferenceDataContext from '../context/hraReferenceData/hraReferenceDataContext';
import MaterialTable from 'material-table';

const EmployeeDetailsCompanyDocuments = ({ companyDocumentsData }) => {
    const hraReferenceDataContext = React.useContext(HraReferenceDataContext);
    const { companyDocumentTypes } = hraReferenceDataContext;

    const getDocumentTypeForRow = id => {
        companyDocumentTypes.forEach(type => {
            if (type.id === id) {
                console.log(type.name)
                return type.name;
            }
        });
    };

    const columnInfo = [
        {
            field: 'typeId',
            title: 'Type',
            render: rowData =>{ getDocumentTypeForRow(rowData.typeId)}, //here is the problem
        },
        { field: 'created', title: 'Created On' },

    ];

    return (
              <MaterialTable
                 columns={columnInfo}
                 data={companyDocumentsData}
                 title="Company Documents List"
               />   
    );
};

Answer 1

回到里面forEach是不行的。

改变这个功能

const getDocumentTypeForRow = id => {
        companyDocumentTypes.forEach(type => {
            if (type.id === id) {
                console.log(type.name)
                return type.name;
            }
        });
    };

到

const getDocumentTypeForRow = id => {
  return companyDocumentTypes.find(type => type.id === id).name;
};

更新

改变

render: rowData =>{ getDocumentTypeForRow(rowData.typeId)},

到

render: rowData => getDocumentTypeForRow(rowData.typeId),

因为您应该返回从 . 返回的值getDocumentTypeForRow。