javascript - 在 React js 中如何将映射转换为数组时进行连接？

Question

我有一个像这样的货币映射文件:

currency.js 在一个对象中包含货币，如下所示:

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

我的代码如下所示:

'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>
    );
};

但是，不支持 Object.values，我必须使用 Object.keys。所以代码看起来像这样:

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

我的问题是“如何在最后一个代码片段中附加选择货币”？

Answer 1

由于array.map返回一个新数组，并且由于数组方法可以链接，因此您可以这样做:

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>
];