ES6 - オブジェクト内のキーをループして新しいオブジェクトに代入する

Question

ページの読み込み時に、メタデータ型をキー名として、メタデータオブジェクトの配列を次のように返すメタデータAPIを呼び出しています。

メタデータ・オブジェクトは、私は、入力コンポーネント（各オブジェクトは、値とラベルが付いた別のチェックボックスまたはラジオボタンであろう）リアクトとうまくプレイするために簡略化し、変更される必要があります。私は基本的に同じフォーマットを返す必要がありますが、id、display_on、nameなどの代わりに値とラベルキーを使用する必要があります。フォームコンポーネントにprops経由で渡されるデータを変更するには、コンテナコンポーネントで次のようにします。問題は、metadataFormattedForInputが常に空のオブジェクトを返すことです。

function mapStateToProps(state, ownProps) { 
    const metadataFormattedForInput = {}; 
    Object.keys(state.metadata).forEach((key) => { 
    const metadataOptions = []; 
    state.metadata[key].map(option => (
     metadataOptions.push({ value: option.id, label: option.name }) 
    )); 
    return (
     Object.assign({}, metadataFormattedForInput, { 
     [key]: metadataOptions, 
     }) 
    ); 
    }); 

    return { 
    metadataOptions: metadataFormattedForInput, 
    }; 
} 

Answer 1

犯人はあなたが（それはforEach呼び出しで返されていますので、あなたはあなたがちょうど後で捨てる空のオブジェクトにプロパティを追加している）Object.assignを使用している方法です。しかし、Object.assignは不要です：

function mapStateToProps(state, ownProps) { 
    const metadataFormattedForInput = {}; 

    Object.keys(state.metadata).forEach(key => { 
    metadataFormattedForInput[key] = state.metadata[key].map(option => 
     ({ value: option.id, label: option.name }) 
    ); 
    }); 

    return { 
    metadataOptions: metadataFormattedForInput, 
    }; 
} 

const metadata = { 
    phaseofthegame: [{id: 1, name: 'foo'}], 
    theme: [{id: 2, name: 'bar'}] 
}; 

console.log(
    mapStateToProps({ metadata }).metadataOptions 
); 

あなたがObject.assignを使用し続けたい場合は、あなたがArray.reduceとそれを組み合わせることができます：ここで

function mapStateToProps(state, ownProps) { 
    const renameProps = (acc, key) => Object.assign(acc, { 
    [key]: state.metadata[key].map(option => 
     ({ value: option.id, label: option.name }) 
    ) 
    }); 

    const metadataOptions = 
    Object.keys(state.metadata).reduce(renameProps, {}); 

    return { metadataOptions }; 
} 

Answer 2

はあなたのコードの問題の一部です：

• forEachを間違った方法で使用しています。forEachは値を返しません。値を返す場合は、mapを使用してください。また

• 、あなたはmap使用し、他の人が言ったようにあなたは、戻り値

  function mapStateToProps(state, ownProps) { 
      let metadataFormattedForInput = Object.keys(state.metadata).reduce((metadataFormattedForInput, key) => { 
      let metadataOptions = state.metadata[key].map(option => 
      ({ value: option.id, label: option.name }) 
  ); 
      metadataFormattedForInput[key] = metadataOptions; 
      return metadataFormattedForInput; 
      },{}); 
  
      return { 
      metadataOptions: metadataFormattedForInput, 
      }; 
  } 
  

Answer 3

を利用していない、つまりforEachようにそれを使用して、および他のいくつかの問題されています

• を返しますforEachコールバックの値は無効です
• 一方、mapコールバックはは、戻り値を持たなければならない
• Object.assign第二引数を変異させていないので、metadataFormattedForInputはmap外Object.assignコールを移動し、構築、ここですべての

でこれを行うための機能的な方法です変更されませんスプレッドの構文で出力：

function mapStateToProps(state, ownProps) { 
 
    return { 
 
     metadataOptions: Object.assign(...Object.keys(state.metadata).map(key => (
 
      { [key]: state.metadata[key].map(option => (
 
        { value: option.id, label: option.name } 
 
       )) 
 
      } 
 
     ))) 
 
    }; 
 
} 
 

 

 
var state = { 
 
    metadata: { 
 
     phaseofthegame: [ 
 
      { id: 123, display_on: ['a', 'b'], name: 'Attacking' }, 
 
      { id: 456, display_on: ['c', 'd'], name: 'Transition to Attack' }, 
 
     ], 
 
     theme: [ 
 
      { id: 789, display_on: ['e', 'f'], name: 'Rondo' }, 
 
      { id: 101, display_on: ['g', 'h'], name: 'Defending Individually' }, 
 
     ] 
 
    } 
 
}; 
 

 
state = mapStateToProps(state); 
 

 
console.log(JSON.stringify(state, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }