В ES6 / React Как мне ссылаться на ключ вложенного объекта в контексте списка?

Question

В настоящее время у меня есть класс с state и render () как таковой:

class ExchangeContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      exchanges:[
        {
          name:"binance",
          url:"https://binance.com"
        },
        {
          name:"bittrex",
          url:"https://bittrex.com"
        }
      ]
    };
  }

  render() {
    return (
      <div className="ExchangeContainer list-group">
        <ExchangeList exchanges={this.state.exchanges}/>
        <ExchangeDetail />
      </div>
    );
  }
}

Обратите внимание, что состояние передается как React prop.Затем эта опора используется (ниже) в другом объекте:

  getListItem = (exchangeUrl, exchangeName) => (
    <a className="nav-link active" href={exchangeUrl}>
      {exchangeName}
    </a>
  );

  render() {
    return (
      <li className="list-group-item">
        {this.getListItem(this.props.exchange.url, this.props.exchange.name)}
      </li>
    );
  }

Учитывая вышеизложенное, я предполагаю, что я изменяю объект состояния как объект вместо массива как такового:

this.state = {
      exchanges:{
        binance:{
          url:"https://binance.com"
        },
        bittrex:{
          url:"https://bittrex.com"
        }
      }
    };

Как мне позже изменить бит ES6, чтобы ссылаться на ключ объекта (я думаю об этом, как об ассоциативном массиве в perl, если это помогает - например, "binance") вместо поиска this.props.exchanges.name, которого больше нет?Например (psuedocode - посмотрите, что второй аргумент теперь «ключ» вместо «имя»)

  render() {
    return (
      <li className="list-group-item">
        {this.getListItem(this.props.exchange.url, this.props.exchange.key)} //KEY not NAME
      </li>
    );

Answer 1

Вы можете использовать для ... в операторе , хотя порядок итерации ключей будет произвольным.Кроме того, совместимость браузера не должна быть проблемой.

Пожалуйста, перейдите по ссылке для получения подробной информации - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 2

Отчасти из-за того, что какой-то другой код (не упомянутый в вопросе), оказывается, что я имел лучшее из того, что я мог получить, и на самом деле мой вопрос не имеет смысла.Я не могу ничего сделать, как я предполагал, возможно.

Answer 3

Ваш новый state.exchange - это один объект с множеством ключей.Вы можете преобразовать его обратно в исходный формат массива, например так:

const state = {
    exchanges:{
        binance:{
            url:"https://binance.com"
        },
        bittrex:{
            url:"https://bittrex.com"
        }
    }
};

// Convert from object format to array
const stateAsArray = Object.keys(state.exchanges).map(key => {
    const ex = state.exchanges[key];
    // add key
    ex.name = key;
    return ex;
})

console.log(stateAsArray);
// => [ { url: 'https://binance.com', name: 'binance' },
//      { url: 'https://bittrex.com', name: 'bittrex' } ]

Теперь у вас есть массив.Вы можете использовать его так же, как раньше.