Question

我试图让一个简单的ES6 for-loop工作，但无法弄清楚为什么它没有运行。

我已经从developer.mozilla docs中复制了一个示例，我也尝试使用下面的eslinter版本：
我还添加了一个let i = 0;以上。所有它渲染/日志是i = 0并且不会增加。 eslint版本在这里：eslint site

bundle.js

编辑：确定将值返回到日志中，因为i = 0，i = 1等等...但是要将它们分别放入一个组件中？我尝试了推入阵列和映射以获取组件，但我没有出现任何错误，也没有出现，即使我尝试获取一个值。

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

最终工作版本：

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>);
}

Answer 1

主要问题是 i += 10;

那应该是 1 += 1;

你应该返回元素数组：

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 nbPageArray.map(a => <p>{a.type}</p>);

Answer 2

如果从你的for循环中return，你将退出当前函数，你也将每次递增10，所以你将在一轮之后退出循环。

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

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

Answer 3

你从循环返回并且也递增10.循环只执行一次。

Answer 4

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

你可以这样做：

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

或者

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

es6 for循环不循环

4 个答案: