无法读取未定义的属性使用Map in React

Question

我正在尝试用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"},
]

Answer 1

您需要在每个映射函数之前设置array && array.length>0条件。array检查数组是否可用。(is数组不可用，然后未定义)