无法读取未定义的属性(读取“映射”)-响应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"}，所以当您在createCellsForRow中调用cells.map()时，cells就是未定义的。