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が標準オブジェクトに配列を再定義します をその後、いくつかの配列のメソッドとプロパティが正しくない結果を生む」 ことが判明：

はあなた

UPDATEありがとう

しかし、問題

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

は私< =終了されることがあります。ここでは

は、作業コードは、私はそれは配列を印刷し、私の地元の反応セットアップ時にチェックしているのですか？長さなどを試してみましたか？

別の解決策はmap（）関数に切り替えてみてください。

お知らせください。