如何在 React 的地图中使用 for 循环 [重复]

Posted 2023-02-21

【中文标题】如何在 React 的地图中使用 for 循环 [重复]

【英文标题】：How to use for-loop in map in React [duplicate]

【发布时间】：2021-04-06 00:34:53

【问题描述】：

您能帮帮我吗，如何在此代码中添加“for”循环 - 目标是仅显示来自所有 cmets 的 3 条评论，这些评论是使用 .map 扫描的。

<div>   data.statement.comments.reverse().map((comment) => (
           
          <div key=comment.id style= marginBottom: 15 >
             <strong>
                comment.user.firstName comment.user.lastName
              </strong>
              <small className=Classes.TEXT_MUTED style= marginLeft: 10 >
                formatCreatedAt(comment.createdAt)
              </small>
            
                        
            </div>
      ))

     
        </div>

我试图把它放在这里 - 但我发现它在 JSX 中不起作用。

 <div>   data.statement.comments.reverse().map((comment) => (
           //for Loop
          <div key=comment.id style= marginBottom: 15 >
             <strong>
                comment.user.firstName comment.user.lastName
              </strong>
              <small className=Classes.TEXT_MUTED style= marginLeft: 10 >
                formatCreatedAt(comment.createdAt)
              </small>
            
                        
            </div>
      ))

     
        </div>

或者您会建议使用其他方法来解决任务吗？

【问题讨论】：

值得一读 - ***.com/questions/46908480/…

【参考方案1】：

你可以使用这个，不需要for loop

data.statement.comments.reverse().slice(0,3).map((comment)...

在此处添加slice 不会改变原来的数组，它会创建一个新数组，它只包含3 个元素。 0 是开始切片的位置，3 是您想要的项目数。

要回答您的问题为什么 for 在那里不起作用，请尝试此代码。

let a = [1,2,3,4];
let c = a.map(el => 
  console.log(el);
  return el + 1;
)
// c = [2, 3, 4, 5];

正如您在此处看到的，Map 返回一个新数组，for 不返回（for 不是函数），如果您仔细查看您的 React 代码，map 将只返回 JSX，for 不能这样做，因为它不是一个函数。

这是另一个例子

[1,2,3].map(el => <p> el </p>)
// is equale to
// <p>1</p><p>2</p><p>3</p>
// which is a valid JSX

所以 中的任何东西都会被执行并被它返回的东西所取代，map 可以返回，但是因为它不是函数，所以不能返回，经验法则：你可以使用什么返回，如果你必须使用for，在函数中使用它并从你的JSX调用它