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

Question

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

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 返回的值。