Question

我很难弄清楚为什么，当我为交换组件调用map函数时，交换信息组件中什么都没有显示。以下是我的组件的定义。

我认为我缺少一些简单的东西，但似乎无法弄清楚。我还是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);

Exchange信息组件：

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;

ExchangeRate组件：

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;

Answer 1

在Exchange Information Component中，您需要在地图函数中使用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;

Answer 2

您需要返回地图。您可以参考我为您的案例https://stackblitz.com/edit/react-rxbe24

创建的示例

Answer 3

是的，您错过了地图内的return语句。

关于最佳做法：您可以观察到，您已将硬币作为道具传递给子项（从HomePage到ExchangeInformation），然后将子项传递到其子项（从ExchangeInformation到ExchangeRate）。称为道具钻孔，以了解更多详细信息：https://blog.kentcdodds.com/prop-drilling-bb62e02cb691。您可以消除这一点。供参考，请通过以下链接：使用道具钻孔：https://codesandbox.io/s/q8yqx48074 消除道具钻孔后：https://codesandbox.io/s/93963xzjnp

调用组件上的Map

3 个答案: