React jsでマップを配列に変換する際に連結する方法は？

Question

私はこのような通貨・マップ・ファイルを持っている：

currency.js次のようになりますオブジェクト内の通貨を持っていますが

'use strict'; 


const React = require('react'); 
const currency = require('js/legacy/core/models/countries'); 

const RegistrationCountryField = ({onCurrencyNameSet, currencyName}) => { 
    const currencyNames = ['Select Currency'].concat(Object.values(currency)); 
    const currencyOptions = function(currencyName) { 
     return <option value={currencyName}>{currencyName}</option>; 
    }; 
    return (
     <fieldset className="form-group"> 
      <label className="group-label">Country</label> 
      <select onChange={onCurrenctNameSet} className="form-group-control" value={currency}> 
       {countryNames.map(currencyOptions)} 
      </select> 
     </fieldset> 
    ); 
}; 

、：

module.exports = { 
    'United States': 'USD', 
    'India': 'Rupee', 
    'Mexico': 'Peso', 
} 

そして、私のコードは次のように見えましたObject.valuesはサポートされていないため、Object.keysを使用する必要がありました。だから、コードはこのように見えた：

const currencyOptions = Object.keys(currency).map((currenyCode) => 
    <option key={currencies[currenyCode]}>{countries[currenyCode]}</option> 
); 

私の質問は、最後のコードスニペットに「私は通貨を選択追加するにはどうすればよい」ですか？ array.map以来

Answer 1

は、新しい配列を返し、配列方法が連鎖させることができるので、あなただけのこれを行うことができます。

const currencyOptions = Object.keys(currency).map((currenyCode) => 
    <option key={currencies[currenyCode]}>{countries[currenyCode]}</option> 
) 
.concat(
    <option key="selectOption">Select currency</option> 
); 

または選択した通貨オプションが最初になりたい場合は、あなたがそれを逆にすることができました：

const currencyOptions = 
    [<option key="selectOption">Select currency</option>] // array of length 1 
    .concat(Object.keys(currency).map((currenyCode) => 
    <option key={currencies[currenyCode]}>{countries[currenyCode]}</option> 
); 

またはspread operatorを使用します。

const currencyOptions = [ 
    <option key="selectOption">Select currency</option>, 
    ...Object.keys(currency).map((currenyCode) => 
<option key={currencies[currenyCode]}>{countries[currenyCode]}</option> 
];