我可以部分显示我的内容（显示名字而不是名字和姓氏）

Question

如何为People和lastName列显示firstName和Invitees ？ 因为现在我可以为列People显示firstName （即Eliot而不是Eliot Gray ）； 对于列Invitees -> firstName和lastName连接在一起（即Paul Poel而不是PaulPoel ）。

export default function Meeting() {
  ...
  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "People",
        accessor: (row) => row.people[0].firstName && row.people[0].lastName
      },
      {
        Header: "Invitees",
        accessor: (row) => row.invitees,
        Cell: (props) =>
          props.value !== [] && props.value.length > 0 ? (
            <div>
              {props.value !== []
                ? props.value
                    .map(({ firstName, lastName }) => firstName && lastName)
                    .join(", ")
                : ""}
              {props.value.length > 0 && (
                <CloseIcon
                  text={
                    props.value !== []
                      ? props.value.map((o) => (
                          <span key={o.firstName}>
                            <b>{o.firstName}</b>
                            <b>{o.lastName}</b>
                          </span>
                        ))
                      : ""
                  }
                />
              )}
            </div>
          ) : (
            ""
          )
      }
    ],
    []
  );

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

我的 json ：

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

Answer 1

如果要为People一起显示firstName和lastName ，请附加名称并返回。

Invities也是如此，而不是使用&&使用+来追加和返回它。 &&将返回最后一个操作数的值，直到它变为false

根据MDN 文档

当且仅当所有操作数都为真时，一组布尔操作数的逻辑与 (&&) 运算符（逻辑合取）才会为真。 否则会是假的。 更一般地，运算符返回从左到右求值时遇到的第一个假操作数的值，或者如果它们都是真值，则返回最后一个操作数的值。

{
  Header: "People",
  accessor: (row) => row.people[0].firstName + " " + row.people[0].lastName
}