如何在React[duplicate]中的映射中使用for循环

Question

你能帮助我，如何在代码中添加“for”循环吗？目标是从所有注释中只显示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>

或者你会推荐用另一种方式来解决任务？

Answer 1

你可以使用这个，不需要一个for循环

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{}调用它