React Table中People/Invitees列如何正确显示firstName与lastName

问题表现 #

开发Meeting模块表格时，要求People、Invitees两列同时展示用户的firstName（名）和lastName（姓）字段，当前存在两处显示错误：

• People列仅渲染出firstName内容，例：数据源为Eliot Gray时，页面实际仅显示Eliot
• Invitees列的firstName和lastName拼接时无空格分隔，例：数据源为Paul Poel时，页面实际显示为PaulPoel

问题根因 #

所有异常均为JS逻辑写法错误导致：

1. People列取值逻辑错误：accessor中使用&&运算符连接两个姓名字段，&&是逻辑判断运算符，本身不具备字符串拼接能力，表达式执行后只会返回第一个假值或最后一个真值，完全不符合拼接姓名的需求
2. Invitees列存在两处错误：
   • 遍历生成列表文本时，同样错误使用&&拼接姓名
   • 渲染弹窗内加粗姓名时，包裹firstName和lastName的两个<b>标签直接相邻，中间没有空格分隔，导致姓和名连在一起
3. 原有代码中props.value !== []属于无效判断：数组是引用类型，直接和空数组字面量做对比永远返回true，无法起到空值判断作用

修复后代码 #

export default function Meeting() {
  ...
  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "People",
        accessor: (row) => {
          // 兼容people数组为空的场景，用模板字符串拼接带空格的姓名
          const targetPerson = row.people?.[0] || {};
          return `${targetPerson.firstName || ''} ${targetPerson.lastName || ''}`.trim();
        }
      },
      {
        Header: "Invitees",
        accessor: (row) => row.invitees,
        Cell: (props) => {
          const invitees = Array.isArray(props.value) ? props.value : [];
          return invitees.length > 0 ? (
            <div>
              {invitees
                .map(({ firstName, lastName }) => {
                  // 拼接带空格的姓名，兼容单名字段存在的场景
                  return `${firstName || ''} ${lastName || ''}`.trim();
                })
                .join(", ")}
              <CloseIcon
                text={
                  invitees.map((o) => (
                    // 优化key取值，避免重名导致的渲染问题
                    <span key={`${o.firstName}-${o.lastName}`}>
                      <b>{o.firstName}</b>
                      {/* 名和姓之间添加空格 */}
                      {' '}
                      <b>{o.lastName}</b>
                    </span>
                  ))
                }
              />
            </div>
          ) : ''
        }
      }
    ],
    []
  );

  return (
    <Table
      data={meeting}
      columns={data}          
    />
  );
}

附：对应数据源结构 #

{
  "meeting": [
    {
      "id": 1,
      "people": [
        {
          "firstName": "Eliot",
          "lastName": "Gray"
        }
      ],
      "invitees": [
        {
          "firstName": "Paul",
          "lastName": "Poel"
        }
      ]
    }
  ]
}

内容的提问来源于stack exchange，提问作者Etopli