Arrays 从状态数组中逐个响应本机列表项

我正在寻找一种方法，在这种方法中，我可以使用数组中的数据，并让它一次显示一项。 这是我的密码：

构造函数（道具）{
超级（道具）；
此.state={
提要：[{
用户名：[“Its_Jess:”，“Haro1d:”，
描述：[“这张新照片太有趣了！”，“在海滩度过了美好的一天”]
}]
}
}
renderFeed=（）=>{
返回此.state.feed.map（（卡片，索引）=>{
返回(
{card.username}
{card.caption}
)
})
}
render（）{
返回(
{this.renderFeed（）}
);
}

我想做的是让它有一个像

它是(u Jess): 这张新照片太有趣了

.那么这张卡之间就要分开了

Haro1d： 在海滩度过了美好的一天

然而，我得到的是：

它的名字是_Jess:Haro1d: 这张新照片太有趣了！在海滩度过了美好的一天

像这样试试

注意：这是解决方案的教程。

const提要=[{
用户名：[“Its_Jess:”，“Haro1d:”，
描述：[“这张新照片太有趣了！”，“在海滩度过了美好的一天”]
}];
常量应用=（）=>{
返回feed.map（（卡片，索引）=>{
返回卡.用户名.映射（（c，i）=>{
if（卡片标题[i]）
返回(
{c}
{card.caption[i]}
);
});
})
}
ReactDOM.render（，document.getElementById（'app'））

因此，建议我使用
const
，而不是
state
？不，这是工作流教程，在我答案的底部，我提供了您的解决方案。当我用您提供的函数替换我的原始函数时，我收到一个错误，它说
意外标记
，因为它指向整个屏幕中渲染函数中的
返回
方法。@frankguly，我更新了答案。我忘了
中的
，它可以工作！不过有一件事。你介意解释一下
键={
${i}{index}
}
的意思吗？这些符号是什么意思？