为什么这些列表项不呈现？答案

【问题标题】：Why are these list items not rendering?为什么这些列表项不呈现？
【发布时间】：2017-07-24 20:22:52
【问题描述】：

有一段代码

        <ul className="product-tags-list">
        {
            _(issueDisplayOrders).map((severity, index) =>
                <li key={index}>
                    {issueCounts[severity]} {severity}
                </li>
            )
        }
        </ul>

issueDisplayOrders 就像

const issueDisplayOrders = ['Critical', 'Error', 'Warning', 'Information'];

而issueCounts 就像

issueCounts: PropTypes.shape({
    Critical: PropTypes.number.isRequired,
    Error: PropTypes.number.isRequired,
    Warning: PropTypes.number.isRequired,
    Information: PropTypes.number.isRequired
})

然而ul 却被渲染为空

<ul class="product-tags-list"></ul>

根据我的单元测试。知道为什么吗？我猜我在某个地方犯了一些新手错误。

【问题讨论】：

你在使用 lodash 吗？
你能展示整个渲染方法吗，也许你在某处缺少返回语句？

标签： javascript html reactjs jsx

【解决方案1】：

如果你不使用 lodash，地图会是这样的：

{
  issueDisplayOrders.map((severity, index) => (
    <li key={index}>
      {`${issueCounts[severity]}${severity}`}
    </li>
  ));
}

如果你使用的是 lodash，那么：

{
  _.map(this.props.selectedResponse, (severity, index) => (
    <li key={index}>
      {`${issueCounts[severity]}${severity}`}
    </li>
  ));
}

【讨论】：