无法读取未定义的属性（读取“地图”） - React JS

Question

我正在尝试从我的 json 格式的模拟数据中填充数据。 当我尝试运行组件时，出现未定义的阅读地图错误。 我已检查我的组件是否仅使用该值呈现。 即使它使用我得到这个未定义错误的值进行渲染。 我曾尝试应用条件渲染，但这对我没有帮助。 我检查了其他有同样问题的解决方案，但没有任何帮助。 任何人都可以指导我在哪里我错过了这一点。 提前致谢。

    import React, { useState } from 'react';
    import mockData from './mock-data/mock-select';

    const createCell = cell => ({ key: cell.key, children: cell.title });
    
    const createCellsForRow = cells => cells.map(cell => createCell(cell)); -----> I am getting error from here(undefined reading map)
    
    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"},
    ]

Answer 1

当您调用rows: createRows(mockData)您在createRows函数中的data如下所示 -

[
    {"SNO":001, "SregID":"SOO1", "Status": "Available"},
    {"SNO":002, "SregID":"SOO2", "Status": "Not Available"},
    {"SNO":003, "SregID":"SOO3", "Status": "Available"},
]

在您的createRows内部，当您调用data.map()时，每个childItem都是数据数组中的一个项目，它是一个对象。 然后，您对每个子项调用createRow(childItem) ，因此createRow rowData内部是来自mockData数组的对象。 在createRow内部调用createCellsForRow(rowData) ，这是未定义的，因为rowData只是{"SNO":001, "SregID":"SOO1", "Status": "Available"} ，所以当你在里面调用cells.map() createCellsForRow cells的数量只是未定义。