リアクション状態とJSONと配列=>結果が不一致

Question

編集：最初の質問に解決策が見つかりました。

私は

setNumbers(e) { 
    e.preventDefault(); 
    var already_exists = false; 
    var ls_data = this.state.storedNumbers; 

    var rname = document.getElementById('name').value; 
    var rnumb = document.getElementById('nummer').value; 
    var ls_key = this.state.ls_key; 

    for (key in ls_data) { 
     if(ls_data.hasOwnProperty(key) === true) { 
      if(ls_data[key].name === rname) { 
       if(ls_data[key].Number === rnumb) { 
        already_exists = true; 
       } 
      } 
     } 
    } 

    if(!already_exists) { 
     ls_key++; 
     ls_data[ls_key] = { 
      name: rname, 
      Number: rnumb 
     }; 

     localStorage.setItem("ls_numbers", JSON.stringify(this.state.storedNumbers)); 
     localStorage.setItem("ls_key", ls_key); 

     this.setState({ 
      ls_key: localStorage.getItem("ls_key"), 
     }); 

    } 
} 

を考えていたよりも容易であるように見えた。しかし、それは、ネストされたオブジェクトではなく配列であるため、今私の問題は、私はそれを反復処理することができないこと、です。だから.mapは機能しません（this.state.storedNumbers.mapは関数ではありません）。

 ls_data[ls_key] = { 
      name: rname, 
      Number: rnumb 
     }; 

が配列に動作していないとして、配列にstoredNumberを変更

は悲しいことに、問題を解決していません。だから今私の質問です。私のls_key変数を使用して配列に名前オブジェクトを作成できますか？配列はのようになりますしながら、

[ 
    null, 
    { 
     "name" : "Person 1", 
     "Number" : "XXXXXXXX" 
    }, 
    { 
     "name" : "Person 2", 
     "Number" : "XXXXXXXX" 
    } 
] 

：

[ 
    "1": { 
     "name" : "Person 1", 
     "Number" : "XXXXXXXX" 
    }, 
    "2": { 
     "name" : "Person 2", 
     "Number" : "XXXXXXXX" 
    } 
] 

かの.mapが配列の場合と同様に、ネストされたJSONの結果を反復処理する方法がある中で結果上記のコードを使用していますか？

Answer 1

さてさて、その後、自分自身をそれを考え出し：

私のデータが不正だ理由（最初の質問が）、まだその程度青いインチ私は多くのコードを変更して元のコードに戻しましたが、奇妙なことにすべてがうまく機能しました。違いが何であるかは分かりません。その後、編集した質問に示すようにコードを簡単に簡略化することができました。

データを繰り返し処理するには、以下のコードを使用してください。よりクリーンなソリューションがあれば教えてください！

{this.state.storedNumbers.length < 1 
    ? <li className='list-group-item'><strong>Geen recente nummers...</strong><span className='pull-right'><span className='glyphicon glyphicon-warning glyph-xl'></span></span></li> 
    : Object.keys(this.state.storedNumbers).map((number) => { 
      return (
       <div className='item' key={number}> 
        <a className='list-group-item list-link'> 
         <strong>{this.state.storedNumbers[number].name}</strong> - ({this.state.storedNumbers[number].Number}) 
        </a> 
        <span className='button-delete glyph-xl'> 
         <i className='glyphicon glyphicon-trash glyph-xl' aria-hidden='true'></i> 
        </span> 
       </div> 
      )}) 
}