在 Material-Table 中使用函数渲染 属性
Using a function in Material-Table render property
我需要在 Material-Table 列渲染中使用自定义函数 属性。
该函数被调用,我在控制台上打印了预期的结果,但是,结果根本不会在 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"
/>
);
};
返回内部 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),
因为您应该 return return 从 getDocumentTypeForRow
编辑的值。
我需要在 Material-Table 列渲染中使用自定义函数 属性。 该函数被调用,我在控制台上打印了预期的结果,但是,结果根本不会在 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"
/>
);
};
返回内部 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),
因为您应该 return return 从 getDocumentTypeForRow
编辑的值。