我正试图从json格式的模拟数据填充数据。当我试图运行组件时,我得到未定义的读取映射错误。我已经检查了我的组件只渲染值。即使是渲染值,我也会得到这个未定义的错误。我试图应用条件呈现但不帮助我。当我试图在createCells上应用条件渲染时对于行,我得到">引用错误";未定义单元格。">CreateCellsForRow";是一个问题,我需要检查它是否得到一个值,如果值不存在,我需要返回null。谁能告诉我我做错了什么吗?提前谢谢。
const createCell = cell => ({ key: cell.key, children: cell.title });
//Actual code
const createCellsForRow = cells => cells.map(cell => createCell(cell)); -----> I am getting error from here(undefined reading map)
//applied conditional Rendering(getting cells is not defined reference error)
const createCellsForRow = cells.length > 0 ? cells => cells.map(cell => createCell(cell)) : null
const StTable = () => {
const [selectedKey, setSelectedKey] = useState([]);
const handleRowToggle = (event, metaData) => {
event.preventDefault();
if (selectedKey !== metaData.key) {
setSelectedKey(metaData.key);
}
};
const createRow = rowData => (
{
key: rowData.key,
cells: createCellsForRow(rowData.cells),
toggleAction: {
metaData: { key: rowData.key },
onToggle: handleRowToggle,
isToggled: selectedKey === rowData.key,
toggleLabel: rowData.toggleText,
},
}
);
const createRows = data => data.map(childItem => createRow(childItem));
return (
<Table
summaryId="example-single-select"
summary="This table shows an implementation of single row selection."
numberOfColumns={4}
cellPaddingStyle="standard"
rowStyle="toggle"
dividerStyle="horizontal"
headerData={{
selectAllColumn: {
checkLabel: 'Single Selection',
},
cells: [
{ key: 'cell-0', id: 'toggle-0', children: 'Name' },
{ key: 'cell-1', id: 'toggle-1', children: 'Address' },
{ key: 'cell-2', id: 'toggle-2', children: 'Phone Number' },
{ key: 'cell-3', id: 'toggle-3', children: 'Email Id' },
],
}}
bodyData={[
{
rows: createRows(mockData),
},
]}
/>
);
};
export default StTable;
//MockDataSample
[
{"SNO":001, "SregID":"SOO1", "Status": "Available"},
{"SNO":002, "SregID":"SOO2", "Status": "Not Available"},
{"SNO":003, "SregID":"SOO3", "Status": "Available"},
]
需要在每个map函数之前设置array && array.length>0
条件。array
检查阵列是否可用。(is array不可用,然后得到undefined)