如何在React中获取map函数中的最后一项

Question

我有一个从CMS返回给我的数据数组。我映射每个项目并返回一个包含相应数据的组件。但是，我需要在render方法中针对.map函数中的最后一项，因为最后一项需要进行一些修改。

我该怎么做呢?

return (
<div>
{data.body.map((item, i) => {
console.log(i);
if (item.type === 'button') {
return <ButtonComponent color="ffffff" bgColor="4C319D" text={item.text} textAlign="left" id={item.id} />
}
})}
</div>
)

Answer 1

根据数组的长度测试索引

const array = ['a', 'b', 'c', 'd'];
const mapped = array.map(
(value, index, array) => {
if (array.length - 1 === index) {
console.log(`${value} is the last item in the array`);
return `-->${value.toUpperCase()}<--`;  
} else {
return value.toLowerCase();  
}
} 
);
console.log({mapped});

Answer 2

通常要访问数组中的最后一项，您可以使用以下公式:

const myArray = [1,2,3,4];
myArray[myArray.length - 1] // return 4.

，在你的代码中你可以这样使用:

<div>
{data.body.map((item, i) => {
console.log(i);
if (item.type === 'button') {
return <ButtonComponent color="ffffff" bgColor="4C319D" text={item.text} textAlign="left" id={item.id} />
}
const lastItem = data.body[data.body.length - 1]
})}

</div>