react-table 从数据中的多个电子邮件地址获取默认电子邮件地址（打字稿）

Question

我希望能够通过从 API

收到的数据访问默认电子邮件

我有一个这样表示的数据：

{
  "id": "123",
  "firstName": "Man",
  "lastName": "Stranger",
  "emailAddresses": [
    {
      "email": "manStranger1@gmail.com",
      "isDefault": true
    },
    {
      "email": "manStranger2@gmail.com",
      "isDefault": false
    },
}

目前我只能在我的 react-table 中显示电子邮件，如下所示：

  const columns: Array<any> = useMemo(
    () => [
      {
        Header: 'Email',
        accessor: 'emailAddresses[0].email',
      },
    ],
    [],
  );

但是，不保证 I[0] 始终是默认电子邮件。通常我会收到这样的默认电子邮件：

data.emailAddresses.filter((x) =>
 x.isDefault === true).map((data: MemberDataStore.EmailAddresses, index) =>
 data.email

但此方法不适用于 react-table 数据

Answer 1

您可以使用 Cell 并在原始 row 数据上使用 Array.find 方法：

{
  id: 'defaultEmail', // Write some unique id as we don't have accessor 
  Header: 'Email',
  Cell: ({row}) => (
    <span>
      {row.original.emailAddresses.find((e) => e.isDefault)?.email ??
        'No default email'}
    </span>
  ),
},

并且如果您收到 的 TS 警告，隐式具有 row 和 e 的 'any' 类型 ，您可以修复类型:

import {Column} from 'react-table'
const columns = useMemo<Column[]>(
  () => [
    { 
      // ..
      Cell: ({row}) => {
        const {emailAddresses} = row.original as InterfaceOrTypeOfData
        return (<span>
          {emailAddresses.find((e) => e.isDefault)?.email ?? 'No default email'}
        </span>)
      }
    },
    // ...
  ],
  [],
);

react-table 从数据中的多个电子邮件地址获取默认电子邮件地址（打字稿）

react-table get default email address from multiple email addresses in data (typescript)

reactjs

typescript

react-table