反应动态表TH标头不显示

Question

我有一个渲染表的react组件。 除了将标题更改为动态呈现而不是对标题进行硬编码之外，我的工作正常。 现在，即使我在console.log中看到我的数据存在，动态标题行也不会显示。 我已经做过这种事一千遍了。 我在俯视什么吗？

<table>
        <thead>
          <tr>
            <th colSpan='10'><label>Weekly Summary:  {this.props.selectedYear}</label></th>
          </tr>
          <tr>
            <th>Category</th>

            {/* <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
            <th>Header 9</th> */}

            {console.log(this.props.transactions)}
            {
              this.props.transactions.map(function(el,i) {
                console.log(el.category)
                if (el.category == "Total"){
                  Object.keys(el.periods).map(function(key,index) {
                    console.log("week value: ", key)
                    return <th key={key}>{key}</th>
                  })
                }  
              })
            }
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
</table>

数据如下所示：

{
"category": "Total",
  "periods": {
    "5": 19654.59,
    "6": 562.2199999999999,
    "7": 534.37,
    "8": 626.67,
    "9": 334.54
  }
}

Answer 1

你的map上功能this.props.transactions将返回undefined的权利，这就是为什么那些th没有被渲染。 您需要从

Object.keys(el.periods).map(function(key,index) {

至

return Object.keys(el.periods).map(function(key,index) {

这样，无论在Object.keys上调用map的结果是什么，您都将返回。