React中使用.map循环异常求助：表头未正确拆分

我来帮你排查一下这个问题～你现在遇到的情况是因为错误地把数组嵌套了一层，导致map遍历的对象不对。

问题根源 #

看你定义的filters变量：

const filters = [this.state.filterAttributes] //[Part Number, Product Line]

如果this.state.filterAttributes本身就是一个包含"Part Number"和"Product Line"的数组，那你把它放进另一个数组后，filters就变成了二维数组：[["Part Number", "Product Line"]]。

当你调用filters.map()时，遍历的是外层数组的每一项——也就是整个内层数组["Part Number", "Product Line"]。React在渲染数组类型的元素时，会自动把数组里的元素拼接成字符串，所以最终就出现了<th>Part NumberProduct Line</th>这种两个标题连在一起的情况。

修正方案 #

直接使用this.state.filterAttributes作为遍历的数组，不需要额外套一层数组：

<tr key={key}>
  {/* 直接遍历原数组，不用套外层数组 */}
  {this.state.filterAttributes.map((k) => {
    // 记得给每个<th>添加唯一的key属性，这是React列表渲染的要求
    return <th key={k}>{k}</th> 
  })}
  <td>{item.PartNumber}</td>
  <td>{item.productline}</td>
</tr>

如果因为某些场景你确实需要保留filters变量，那修改成下面这样也可以：

// 直接赋值原数组，不要套[]
const filters = this.state.filterAttributes

这样map就会遍历数组里的每一个标题字符串，分别渲染出独立的<th>标签啦。

内容的提问来源于stack exchange，提问作者An User