Javascript 如果数组位于对象中，如何使用map方法从数组中获取数据？

有一个Api-一个数组：

[
{"id":1,"firstName":"Alex","lastName":"Creel","email":"BGibson@placerat.ly","phone":"(898)979-8452"},
{"id":2,"firstName":"Todd","lastName":"Drek","email":"BGibson@placerat.ly","phone":"(898)979-8452"},
{"id":3,"firstName":"Jim","lastName":"Sparou","email":"BGibson@placerat.ly","phone":"(898)979-8452"},
{"id":4,"firstName":"Tom","lastName":"Limls","email":"BGibson@placerat.ly","phone":"(898)979-8452"},
{"id":5,"firstName":"Jack","lastName":"Retnd","email":"BGibson@placerat.ly","phone":"(898)979-8452"}
]

使用fetch，我得到了Api—一个成为数据对象的数组（我不编写App.js代码，所以问题不会太长） 使用映射方法，以表格的形式在页面上显示所需的数据：

export default props => (
  <table className="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    {props.data.map(item => (
      <tr key={item.id}>
        <td>{item.id}</td>
        <td>{item.firstName}</td>
        <td>{item.lastName}</td>
      </tr>
    ))}
  </tbody>
  </table>
)

我有一个问题，我该如何更改代码的这一部分：

{props.data.map(item => (
      <tr key={item.id}>
        <td>{item.id}</td>
        <td>{item.firstName}</td>
        <td>{item.lastName}</td>
      </tr>

但错误是：

---

TypeError:无法读取未定义的属性“first”

如果您试图同时适应这两种情况，也许您可以在映射项目之前进行快速检查，以查看当前使用的情况。例如：

const arr = props.data.group && props.data.group.first ? 
  props.data.group.first : props.data;

arr.map(item => { ... });

---

错误：./src/Table/Table.js第16:16行：未定义“项”未定义未定义第17:14行：未定义“项”未定义未定义第18:14行：未定义“项”未定义未定义第19:14行：未定义“项”未定义代码沙盒中的所有代码：我刚刚浏览了一下。。。看起来你指的是

props.item

？很抱歉，我忘了在沙盒中添加应用程序的组件js文件，请再次查看，也许你会更好地理解我的任务以及我出错的原因。在我将代码添加到项目中后出现的错误（屏幕截图）：我明白了，您似乎试图在JSX本身而不是在外部做一些事情。请查看此固定版本：因此

props.data.group&&props.data.group.first

将确保

group

和

first

存在，然后再假设我们应该使用该逻辑。如果它们不存在，那么我们只使用

props.data

{props.data.group.first.map(item =>

const arr = props.data.group && props.data.group.first ? 
  props.data.group.first : props.data;

arr.map(item => { ... });