React Bootstrap Table如何展示嵌套对象product_category的name字段

嘿，我懂你现在碰到的麻烦——React Bootstrap Table没办法直接通过dataField='product_category.name'这种写法读取嵌套对象里的属性，所以才会显示{object} {object}。这里给你两个实用的解决办法：

方法一：用formatter自定义列渲染 #

这是最直接的方案，给对应的TableHeaderColumn加上formatter属性，手动指定要展示的内容：

<TableHeaderColumn 
  dataField='product_category' 
  filter={ { type: 'TextFilter', delay: 1000 } }
  formatter={(cell) => cell?.name} // 用可选链避免数据为空时报错
>
  Category
</TableHeaderColumn>

简单说，formatter函数会拿到当前单元格的数值（也就是product_category这个对象），然后返回你要的name属性。加?.是为了防止有些数据里product_category是空值，避免控制台报错；如果你用的React版本不支持可选链，换成cell && cell.name也能达到同样的效果。

方法二：预处理API返回的数据 #

如果觉得每列写formatter麻烦，你可以在把数据存到state之前，先把嵌套属性提出来，改成扁平结构：

// 假设你是用fetch获取API数据的
fetch('你的API接口地址')
  .then(res => res.json())
  .then(rawData => {
    // 把product_category.name提取成单独的categoryName字段
    const processedData = rawData.map(item => ({
      ...item,
      categoryName: item.product_category?.name
    }));
    this.setState({ todos: processedData });
  });

之后表格里就可以直接用这个新字段了：

<TableHeaderColumn 
  dataField='categoryName' 
  filter={ { type: 'TextFilter', delay: 1000 } }
>
  Category
</TableHeaderColumn>

这种方式适合你需要多次用到这个嵌套属性的场景，表格配置也会更简洁。

对了，你的图片列现在应该只是显示URL，要是想直接展示图片的话，也可以用formatter来渲染img标签：

<TableHeaderColumn dataField='image' formatter={(imgUrl) => <img src={imgUrl} alt="Product" style={{ width: '50px', height: '50px' }} />}>
  Image
</TableHeaderColumn>

内容的提问来源于stack exchange，提问作者Mickael Zana