如何通过一个以上的孩子 - 反应JS

Question

嗨，我正在开发一个表组件，需要动态地将数据填充数据。我在Arrayof中维护BodyData：[{}]。将根据模拟数据中的值动态创建单元格。我需要从MockData中传递身体中的四个不同数据。现在所有的人都在小时候通过。现在，我需要以徽章格式在表单元中显示一个数据。为此，我试图通过多个孩子，以便我可以以徽章形式培养一个孩子。但是，当我经过多个孩子时，组成部分只会使最后一个孩子的价值。任何人都可以帮助我如何通过（徽章形式的品牌价值）。提前致谢。我已经写下了工作代码和MockData。

import mockData from './mock-data/';

const createCell = cell => ({ key: cell.key, children: cell.children});
//tried to pass like cell => ({ key: cell.key, children: cell.customerName, 
//children:cell.customerAddr})

const createCellsForRow = cells => cells.map(cell => createCell(cell)); 

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: 'Brand' },//I need to pass this is as 
                                                               //badge format.
        ],
      }}
      bodyData={[
        {
          rows: createRows(mockData),
        },
      ]}
    />
  );
};

export default StTable;

//mockData Sample
[
    {
        "key":"row-0",
        toggleText:"txt",
        "cells":[
          { key: 'cell-0', id: 'toggle-0', children: 'ABC' },
          { key: 'cell-1', id: 'toggle-1', children: 'ABC123' },
          { key: 'cell-2', id: 'toggle-2', children: 'P1234567890' },
          { key: 'cell-3', id: 'toggle-3', children: ['A', 'B'] },
        ]
]

//I am trying to change the structure because (I need to display the brand in badge format)
[
    {
        "key":"row-0",
        toggleText:"txt",
        "cells":[
          { key: 'cell-0', id: 'toggle-0', customerName: 'ABC' },
          { key: 'cell-1', id: 'toggle-1', customerAddr: 'ABC123' },
          { key: 'cell-2', id: 'toggle-2', customerPhNo: 'P1234567890' },
          { key: 'cell-3', id: 'toggle-3', customerBrand: ['A', 'B'] },
        ]
]


//Table Component
const createCell = cell => ({ key: cell.key, children: cell.title });

const createCellsForRow = cells => cells.map(cell => createCell(cell));

const Table = () => {
  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
      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 Table;