es6 for循环不循环

Question

我正在尝试让一个简单的 ES6 for 循环工作，但无法弄清楚为什么它不能运行。

我已经从 developer.mozilla 文档中复制了一个示例，并且我还在下面的 eslinter 版本中进行了尝试：
我还添加了一个 let i = 0;多于。所有 renders/logs 都是 i = 0 并且不会递增。 eslint 版本在这里：eslint site

  for (i = 0; i < 10; i += 1) {
    console.log('i', i);
    return <p>component {i}</p>;
  }

编辑：好的，日志中返回的值是 i=0、i=1 等...但是要将它们分别放入一个组件中吗？我尝试了推入数组并通过映射来取出组件，但我没有收到任何错误，也没有出现任何东西，即使我只是尝试取出一个值。

const nbPageArray = [];
  let i = 0;
  for (i = 0; i < nbPages; i += 1) {
    console.log('i', i);
    nbPageArray.push(<p>component {i}</p>);
  }
  console.log('array', nbPageArray);
  nbPageArray.map(a => <p>{a.type}</p>);
}

最终工作版本：

const nbPageArray = [];
for (let i = 0; i < nbPages; i += 1) {
  nbPageArray.push({ page: i + 1 });
}
return nbPageArray.map(a =>
  <li className="page-item"><a className="page-link">{a.page}</a></li>,
);

Answer 1

如果你从你的 for 循环中 return，你将退出当前函数，你也会在每次循环中将 i 递增 10，所以无论哪种方式，你都会在一轮后退出循环。

如果您尝试打印值为 i 的字符串十次，您可以尝试使用如下模板字符串：

for (i = 0; i < 10; i += 1) {
  console.log('i', i);
  console.log(`<p>component ${i}</p>`);
}

Answer 2

您正在从循环返回并且递增 10。循环将只执行一次。

Answer 3

如评论中所述，for 循环内的 return 将在第一次迭代时退出函数。

您可以改为这样做：

const result = Array(10).fill().map((_, i) =>
  <p>component {i}</p>
);

或者

const result = [...Array(10)].map((_, i) =>
  <p>component {i}</p>
);

Answer 4

主要问题是i += 10;

应该是1 += 1;

你应该 return 元素数组：

var p_tags = [];
for (i = 0; i < 10;  i += 1) {
    console.log('i', i);
    p_tags.push(<p>component {i}</p>);
}
return p_tags;

已编辑问题的答案：

第一个错误：

const nbPageArray = []; 应该是 var nbPageArray = [];

其次，您没有 return 数组，因此请将您的代码更改为

return nbPageArray.map(a => <p>{a.type}</p>);

es6 for循环不循环

es6 for loop not looping

ecmascript-6

reactjs

eslint