React Map遍历中如何获取对象内数组的最后一个元素属性？

核心问题 #

你当前的lastGrade写法无法获取目标值，原因很明确：

• slice(-1)返回的是包含最后一个元素的数组（比如[{ index: 12, name: "something else"}]），而非单个对象。数组本身没有index属性，所以slice(-1)?.index必然返回undefined。
• 你尝试的slice().reverse().index同理，reverse()返回的仍是数组，同样无法直接访问index。

可行解决方案 #

以下几种写法都能正确获取grade数组最后一个元素的index：

方案1：通过数组长度直接访问（最直观）

利用数组长度减1定位最后一个元素，配合可选链避免空数组报错：

lastGrade={personnage.grade[personnage.grade.length - 1]?.index}

方案2：改进slice(-1)的用法

先通过slice(-1)拿到包含最后一个元素的数组，再取数组第0项拿到对象，最后访问index：

lastGrade={personnage.grade.slice(-1)[0]?.index}

方案3：修正reverse的写法

先复制数组（避免修改原数组），反转后取第0项（对应原数组最后一个元素）：

lastGrade={personnage.grade.slice().reverse()[0]?.index}

修改后的完整代码示例 #

.map((personnage) => (
    <Card
        key={personnage._id}
        id={personnage._id}
        name={personnage.name}
        job={personnage.job.toLowerCase()}
        firstBounty={personnage.bounties[0]?.toLocaleString()}
        lastBounty={personnage.bounties.slice(-1).toLocaleString()}
        firstGrade={personnage.grade[0]?.index}
        lastGrade={personnage.grade[personnage.grade.length - 1]?.index} // 替换为任意一种可行方案即可
    />
))

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