オブジェクトのforループ出力を変数に代入する方法

Question

オブジェクトを配列に変換している間、私は解決できない重大な間違いを発見しました。 mapメソッドを配列に使用すると、何かが返されますが、オブジェクトでは何も返しません。

let output = for(var key in taggedOnes) { <- this is not a good approach at all. 
// But I'm looking for similar logic. 
     let item = taggedOnes[key]; 
     ... 
     if(id===this.state.selectedClothId) { 
     return (<- I can't return it? :(
      <View 
      key={id} 
      style={{ 
       top, 
       left, 
       height: thumbSize, 
       width: thumbSize, 
       borderWidth: 2, 
       borderColor: 'yellow' 
      }} 
      /> 
     ); 
     } else { 
     return (
      <View 
      key={id} 
      style={{ 
       top, 
       left, 
       height: thumbSize, 
       width: thumbSize, 
       borderWidth: 2, 
       borderColor: 'white' 
      }} 
      /> 
     ); 
     } 
    } 
    return output; <- I want to return whole React Elements in one element like array. 

Answer 1

あなたのtaggedOnesオブジェクト内のキーを持つ配列を取得するためにObject.keysを使用することができます。 次に、この配列のArray.prototype.mapを呼び出して配列をブラウズし、別の配列を返すことができます。

私はあなたのid変数を作成しますどこか分からないが、あなたは簡単に以下の例を適応させることができます：あなたが必要なもの

const output = Object.keys(taggedOnes).map(key => { 
     const item = taggedOnes[key]; 

     if (id === this.state.selectedClothId) { 
     return (
      <View 
      key={id} 
      style={{ 
       top, 
       left, 
       height: thumbSize, 
       width: thumbSize, 
       borderWidth: 2, 
       borderColor: 'yellow' 
      }} 
      /> 
     ); 
     } else { 
     return (
      <View 
      key={id} 
      style={{ 
       top, 
       left, 
       height: thumbSize, 
       width: thumbSize, 
       borderWidth: 2, 
       borderColor: 'white' 
      }} 
      /> 
     ); 
     } 
    } 
}); 

Answer 2

はObject.keys(taggedOnes).mapです。 forループは、値をループするだけのものを返しません。forループ内のreturn文は、現在の関数を返します。

マップは、提供された関数を使用して配列の各要素を変換します。この場合、マップは反応コンポーネントのリストに変換しています。

Answer 3

Object.keys(taggedOnes).mapを使用して、taggedOnesオブジェクトをその変換された値の配列に変換できます。

let output = Object.keys(taggedOnes).map(key => { 
    let item = taggedOnes[key]; 
    ... 
    if (id===this.state.selectedClothId) { 
    return ... 
    } else { 
    return ... 
    } 
});