Reactjs 在组件上调用映射时未呈现项

我很难弄明白为什么在调用exchangerate组件的map函数时，exchange信息组件中没有显示任何内容。下面是我的组件的定义

我想我遗漏了一些简单的东西，但我似乎无法理解。我仍然是

React

新手，在呈现组件集合时总是遇到问题。有什么我可以遵循的最佳实践吗

主分量

class HomePage extends React.Component {
  //some setup here

  componentDidMount() {
    //some action here
  }

  componentWillReceiveProps(newProps) {
    //some prop checking here
  }

  render() {
    return (
      <div>
        <div className="row flex-container">
        {
            <ExchangeInformation
              coin={this.state.coin}
              exchangeRates={this.state.exchangeRates}
            />
        }
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    //returning state selectors here
  };
}

function mapDispatchToProps(dispatch) {
  return {
    //return actions here
  };
}

HomePage.propTypes = {
  ccActions: PropTypes.object.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

类主页扩展React.Component{
//这里有一些设置
componentDidMount（）{
//这里有些行动
}
组件将接收道具（新道具）{
//这里有一些道具检查
}
render（）{
返回(
{
}
);
}
}
函数mapStateToProps（状态，ownProps）{
返回{
//正在返回状态选择器
};
}
功能图DispatchToprops（调度）{
返回{
//在这里返回操作
};
}
HomePage.propTypes={
C操作：PropTypes.object.isRequired
};
导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；

交换信息组件：

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              <div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

const ExchangeRate = ( {coin, exchangeRate, symbol} ) => {
  return (
    <label className="label-field">
      <strong>{"1 " + coin.CoinName}</strong> is equal to <strong>{exchangeRate + " (" + symbol + ")"}</strong>
    </label>  
  );
};

ExchangeRate.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRate: PropTypes.number,
  symbol: PropTypes.string
}

export default ExchangeRate;

const exchange信息=（{coin，exchangeRates}）=>{
返回(
现行汇率
{
Object.keys（交换率）.map（函数（键，索引）{
})
}
);
};
ExchangeInformation.propTypes={
硬币：PropTypes.object.isRequired，
交换率：PropTypes.object
}
导出默认交换信息；

汇率成分：

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              <div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

const ExchangeRate = ( {coin, exchangeRate, symbol} ) => {
  return (
    <label className="label-field">
      <strong>{"1 " + coin.CoinName}</strong> is equal to <strong>{exchangeRate + " (" + symbol + ")"}</strong>
    </label>  
  );
};

ExchangeRate.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRate: PropTypes.number,
  symbol: PropTypes.string
}

export default ExchangeRate;

const-ExchangeRate=（{coin，ExchangeRate，symbol}）=>{
返回(
{“1”+硬币。硬币名}等于{exchangeRate+”（“+symbol+”）}
);
};
ExchangeRate.propTypes={
硬币：PropTypes.object.isRequired，
汇率：PropTypes.number，
符号：PropTypes.string
}
出口违约汇率；

在

交换信息组件

中，您需要在map函数中使用

return

语句

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              // add return statement here
              return  (<div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>)
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

const exchange信息=（{coin，exchangeRates}）=>{
返回(
现行汇率
{
Object.keys（交换率）.map（函数（键，索引）{
//在此处添加返回语句
返回(
)
})
}
);
};
ExchangeInformation.propTypes={
硬币：PropTypes.object.isRequired，
交换率：PropTypes.object
}
导出默认交换信息；

在

交换信息组件

中，您需要在map函数中使用

return

语句

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              // add return statement here
              return  (<div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>)
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

const exchange信息=（{coin，exchangeRates}）=>{
返回(
现行汇率
{
Object.keys（交换率）.map（函数（键，索引）{
//在此处添加返回语句
返回(
)
})
}
);
};
ExchangeInformation.propTypes={
硬币：PropTypes.object.isRequired，
交换率：PropTypes.object
}
导出默认交换信息；

您需要在地图中返回。您可以参考我为您的案例创建的示例

https://stackblitz.com/edit/react-rxbe24

您需要在地图中返回。您可以参考我为您的案例创建的示例

https://stackblitz.com/edit/react-rxbe24

是的，您错过了地图中的

返回

语句

关于最佳做法： 您可以观察到，您将硬币作为道具传递给孩子（主页传递给交换信息），然后孩子传递给它的孩子（交换信息传递给交换率）。这被称为道具钻孔，了解更多详细信息：。你可以消除这个。请浏览以下链接以供参考： 使用支柱钻孔：

---

取消道具钻取后：

是的，您错过了地图中的

return

语句

关于最佳做法： 您可以观察到，您将硬币作为道具传递给孩子（主页传递给交换信息），然后孩子传递给它的孩子（交换信息传递给交换率）。这被称为道具钻孔，了解更多详细信息：。你可以消除这个。请浏览以下链接以供参考： 使用支柱钻孔：

---

取消道具钻孔后：

谢谢！我知道我错过了一些简单的东西！谢谢你！我知道我错过了一些简单的东西！