reactjs React，如何Map评论以在横幅中显示每个评论

sqxo8psd 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(131)

我是React的新手，我面临着一个无法解决的问题。我想在前端Map从数据库检索到的评论。我担心的是，在某些情况下，我有几个用户评论，我想在一个横幅中显示每个评论。我几乎做到了，但目前在我正在探索的情况下，我有三个意见，但这三个意见显示在三个相同的横幅连续。虽然我希望他们出现在各自的横幅。谢谢你提前为您的帮助！

`const { actions } = useGetActionsFromReport(sarId, WorkflowActionEnum.ASK_FOR_MODIFICATION)
const comments = actions?.map((action) => action.comment || '')
return (
<ContentWithAccessControl error={suspiciousActivityReportError}>
   <StepLayout>
      <Styled.Container data-testid="sar-initialisation-step-container">
        {comments && comments.map((comment) => {
          return (
            <Banner
              key={comment}
              label={t('redaction.initialisation.comments.label', { comments })}
              testId="get-comments"
              type={Type.INFORMATION} >
              {t('redaction.initialisation.comments.label', { comments })}
            </Banner>)})}`

enter image description here

reactjs

来源：https://stackoverflow.com/questions/75500486/react-how-to-map-comments-to-display-them-each-in-a-banner

1条答案

按热度按时间

vdzxcuhz1#

您可以使用数组中元素的索引在其各自的横幅中显示注解：

const { actions } = useGetActionsFromReport(sarId, WorkflowActionEnum.ASK_FOR_MODIFICATION);
const comments = actions?.map((action, index) => action.comment || '');

return (
  <ContentWithAccessControl error={suspiciousActivityReportError}>
    <StepLayout>
      <Styled.Container data-testid="sar-initialisation-step-container">
        {comments && comments.map((comment, index) => {
          return (

            <Banner
              key={`comment-${index}`}
              label={t('redaction.initialisation.comments.label', { comment })}
              testId="get-comments"
              type={Type.INFORMATION} 
            >
              {t('redaction.initialisation.comments.label', { comment })}
            </Banner>

          )
        })}
      </Styled.Container>
    </StepLayout>
  </ContentWithAccessControl>
);

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs React，如何Map评论以在横幅中显示每个评论

1条答案

相关问题

热门标签

最新问答