在ES6/React中如何在列表上下文引用嵌套对象的键？

当你把exchanges从数组改成键为交易所名称的对象后，核心是要获取对象的键（比如"binance"）作为显示的名称，同时拿到对应的url。下面分步骤修改代码：

1. 调整父组件的props传递（或在子组件处理） #

首先，你的父组件ExchangeContainer现在的state.exchanges是一个对象，你可以选择在父组件把它转换成可遍历的键值对数组，或者直接传递原对象给子组件，让子组件自己处理。

方式一：父组件转换后传递 #

修改ExchangeContainer的render方法，用Object.entries()把对象转成[键, 值]格式的数组：

render() {
  return (
    <div className="ExchangeContainer list-group">
      {/* 把对象转成[key, exchangeObj]的数组传递 */}
      <ExchangeList exchanges={Object.entries(this.state.exchanges)} />
      <ExchangeDetail />
    </div>
  );
}

方式二：直接传递原对象 #

保持父组件的render不变，让子组件ExchangeList自己处理对象遍历：

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

2. 修改列表组件的遍历逻辑 #

假设ExchangeList是负责渲染整个列表的组件，我们需要遍历exchanges对象的键值对，把每个交易所的名称和url传给列表项组件：

如果用方式一（父组件已转数组）： #

class ExchangeList extends Component {
  render() {
    return (
      <ul>
        {/* 遍历[key, exchangeObj]数组，解构拿到名称和数据 */}
        {this.props.exchanges.map(([exchangeName, exchangeData]) => (
          <ExchangeItem
            key={exchangeName}
            exchangeName={exchangeName}
            exchangeUrl={exchangeData.url}
          />
        ))}
      </ul>
    );
  }
}

如果用方式二（子组件处理原对象）： #

用Object.entries()直接遍历对象，或者用Object.keys()拿到所有键再取值：

class ExchangeList extends Component {
  render() {
    const { exchanges } = this.props;
    return (
      <ul>
        {/* 方式A：用Object.entries直接获取键和值 */}
        {Object.entries(exchanges).map(([exchangeName, exchangeData]) => (
          <ExchangeItem
            key={exchangeName}
            exchangeName={exchangeName}
            exchangeUrl={exchangeData.url}
          />
        ))}

        {/* 方式B：用Object.keys拿到键，再通过键取url */}
        {/* {Object.keys(exchanges).map(exchangeName => (
          <ExchangeItem
            key={exchangeName}
            exchangeName={exchangeName}
            exchangeUrl={exchanges[exchangeName].url}
          />
        ))} */}
      </ul>
    );
  }
}

3. 更新列表项组件的代码 #

现在你的列表项组件（就是那个有getListItem的组件）可以直接接收exchangeName和exchangeUrl这两个props，不再需要从this.props.exchange.name取值：

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

  render() {
    const { exchangeName, exchangeUrl } = this.props;
    return (
      <li className="list-group-item">
        {this.getListItem(exchangeUrl, exchangeName)}
      </li>
    );
  }
}

这样修改后，你的列表就能正确显示交易所的名称（对象的键）和对应的链接了。

内容的提问来源于stack exchange，提问作者marcus