React中如何映射评论实现单条评论对应独立Banner展示

你的问题出在两个核心点：

• 调用国际化函数t时传入了整个comments数组，导致每个Banner都渲染所有评论内容，而非当前循环的单条评论
• 用comment作为key存在重复风险，会引发React渲染异常，建议使用每个action的唯一标识作为key

修改步骤： #

1. 保留原始actions数据，无需提前转成纯评论数组，这样能获取每个action的唯一标识（比如id）
2. 遍历actions时，直接取当前action的comment传给t函数
3. 将key替换为action的唯一字段（比如action.id，可根据实际数据结构调整）

修改后的代码示例：

const { actions } = useGetActionsFromReport(sarId, WorkflowActionEnum.ASK_FOR_MODIFICATION)
return (
<ContentWithAccessControl error={suspiciousActivityReportError}>
   <StepLayout>
      <Styled.Container data-testid="sar-initialisation-step-container">
        {actions?.map((action) => {
          const comment = action.comment || '';
          return (
            <Banner
              key={action.id} {/* 用action唯一ID做key，避免重复问题 */}
              label={t('redaction.initialisation.comments.label', { comment })} {/* 传入当前单条评论 */}
              testId="get-comments"
              type={Type.INFORMATION} >
              {t('redaction.initialisation.comments.label', { comment })} {/* 同样传入当前单条评论 */}
            </Banner>
          )
        })}
      </Styled.Container>
   </StepLayout>
</ContentWithAccessControl>

补充说明： #

• 确保你的国际化文案redaction.initialisation.comments.label支持接收单个comment变量，比如文案格式为"评论：{{comment}}"
• 如果actions中没有id字段，可临时用index作为key（不推荐生产环境），或选用action的其他唯一属性

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