时间戳

首页 > 解决方案 > 使用 Array.map() 渲染动态数组，但仅适用于选定的值

javascript - 使用 Array.map() 渲染动态数组，但仅适用于选定的值

问题描述

我正在尝试创建一个常用的表。在我的表格中，我只需要从我的数据数组中显示一些选定的值。并且数组对象键可以更改。我的数组包含很多属性。我不需要将它们全部显示在表格中。前任。ID，布尔值。

大批：

const tableData =[{
  city: "New york"
  departmentId: "3"
  email: "email@gmail.com"
  fullName: "John Wick"
  gender: "male"
  hireDate: "2020-09-25T12:14:00.000Z"
  id: 2
  isPermanent: false
  mobileNumber: "0774695365"
  selectBoxTitle: "Accounting"
}]


const [records, setRecords] = useState(tableService.getAllTableData)
const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })

表格呈现如下

<TableBody>
    recordsAfterPagingAndSorting().map(record => (
       <TableRow key={record.id}>
        <TableCell className="searchCell-body" size='small'>{record.fullName}</TableCell>
        <TableCell className="searchCell-body" size='small'>{record.email}</TableCell>
        <TableCell className="searchCell-body" size='small'>{record.mobileNumber}</TableCell>
        <TableCell size='small'>{record.selectBoxTitle}</TableCell>
        <TableCell size='small'>

            {figureActionButtons.viewMoreDetailsButton == true ?
                <Controls.ActionButton
                    color="primary"
                    tooltipText="View"
                    onClick={() => openInMoreDetailsPopup(record)}
                >
                    <SearchIcon fontSize="small" />
                </Controls.ActionButton> : null
            }
        </TableCell>
    </TableRow>
    ))
</TableBody>

recordsAfterPagingAndSorting()返回上面的对象数组。

const recordsAfterPagingAndSorting = () => {
    return stableSort(filterFn.fn(records), getComparator(order, orderBy)).slice(page * rowsPerPage, (page + 1) * rowsPerPage)
}

此对象可以更改。所以我不能{record.fullName}像这样渲染值。fullName可以是firstName, lastName

我需要一种方法来定义应该在表中显示哪些值。定义一些 ware 并传递给这个 .map() 方法。我想像const tableBody = {columnOne: 'fullName', columnTwo: 'email', columnThree: 'city'}

我试过这个但没有奏效

<TableCell className="searchCell-body" size='small'>{recordsAfterPagingAndSorting()[record]}</TableCell>

感谢您的帮助谢谢。

标签： javascriptreactjs

解决方案

我认为你需要做的是一个内部 map 方法，它枚举你想要显示的字段。

请参见下面的示例：

const tableData = [{
  city: "New york",
  departmentId: "3",
  email: "email@gmail.com",
  fullName: "John Wick",
  gender: "male",
  hireDate: "2020-09-25T12:14:00.000Z",
  id: 2,
  isPermanent: false,
  mobileNumber: "0774695365",
  selectBoxTitle: "Accounting",
}];

function MyComponent({records, fields}) {
  return (
    <table>
      <thead>
        <tr>
          { fields.map(field => (
            <th key={field}>{field}</th>
          )) }
        </tr>
      </thead>
      <tbody>
        { records.map(record => (
          <tr key={record.id}>
            { fields.map(field => (
              <td key={field}>{record[field]}</td>
            )) }
          </tr>
        )) }
      </tbody>
    </table>
  );
}

ReactDOM.render(<MyComponent records={tableData} fields={['email', 'fullName']}/>, document.getElementById("app"));
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="app"></div>

推荐阅读