如何在 React/ES6 中映射关联数组？开始一个无限循环

Question

数组的生成方式如下：

for(var i = start; i <= end;i+=step) {
    arr[i] = i + 'is the number';
}

数组结构是这样的

arr = [
1100: "1100 is the number",
1101: "1101 is the number",
1102: "1102 is the number",
1103: "1103 is the number",
1104: "1104 is the number",
1105: "1105 is the number",
]; 

等等。

这个数组将被映射到 React 中的一个列表元素中。

render() {
    const list = this.arr;
    const timeList = list.map((element) =>
        <li>{element}</li>
        );


    return (
      <div className="App" >
        {timeList}
      </div>
    ); 

它适用于常规数组，但使用这个会给我一个无限循环。

为什么会发生这种情况以及解决这个问题的可能性是什么？

谢谢

更新： 发现 “如果你使用命名索引，JavaScript 会将数组重新定义为标准对象。 之后，一些数组方法和属性会产生不正确的结果。”

但还是没有解决问题

Answer 1

我假设您的渲染函数中有 arr 变量。您的问题是“this.arr”。从此处删除“this”并使用“arr”。

这是工作代码，我检查了我的本地反应设置，它打印了数组：

render() {
    const arr = [
         1100: "1100 is the number",
         1101: "1101 is the number",
         1102: "1102 is the number",
         1103: "1103 is the number",
         1104: "1104 is the number",
         1105: "1105 is the number",
     ];
    const list = arr;
    const timeList = list.map((element, idx) =>
        <li key={idx}>{element}</li>
        );


    return (
      <div className="App" >
        {timeList}
      </div>
    );
}

Answer 2

可能是 i

另一种解决方案是尝试切换到 map() 函数。

请告诉我。