javascript - 在react-table-2的同一列中显示名字和姓氏

Question

我有一个 API 呈现一些用户数据，名字和姓氏等:

users = [{
  firstname: 'Peter',
  lastname: 'Pan'
  address: 'someAddress'
},
  firstname: 'Winnie',
  lastname: 'thePoo'
  address: 'someOtherAddress'
}]

现在，我想在 react-table-2 的同一列中显示姓名，以便同时搜索名字和姓氏。 做这个的最好方式是什么？我曾尝试通过“格式化程序”属性格式化数据，但在搜索时似乎效果不佳。

有什么想法吗？我想避免更改 API

Answer 1

import React, { Component } from 'react';

const data = [
  {
    firstname: 'Peter',
    lastname: 'Pan',
    address: 'someAddress'
  },
  {
    firstname: 'Winnie',
    lastname: 'thePoo',
    address: 'someOtherAddress'
  }
]

class TwoFielSameColumn extends Component{

    render(){
      const finalData = data.map(item => ({
        ...item,
        fullName: `${item.firstname} ${item.lastname}` || "",
      }))
    
      return(
        <div>
          {finalData.map((q) => <div>{q.fullName}</div>)}
        </div>
      )
    }
}

export default TwoFielSameColumn;

使用tabledata的finalData