Question

我有一个反应组件呈现一个表。我工作得很好，除了我改变我的标题以动态呈现而不是硬编码标题。现在动态标题行没有显示，即使我在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上调用地图的结果。

React动态表TH头不显示

1 个答案: