React组件函数内if块未渲染，表格动态传值无内容求助

问题描述 #

开发React表格组件时，按指定Table Props动态传递数据，表头渲染正常，但表体无内容，控制台提示“check the render method of the table component”，且处理数组的if分支未执行。

我的代码 #

const Table = ({mockData}) => {

function getHeadings(mockData) {
    return mockData[0].cells.map(heading => {
        return <HeaderCell key={heading.key}>{heading.headername}</HeaderCell> // 这部分正常工作
    })
}


function getRow(cells) {
    return cells.map(cell => {
        const {headername} = cell;
        if(Array.isArray(cell[headername])){
            return (
                <Cell key={cell.toString()}>
                    {
                        cell[headername].map(element => {
                            console.log("ELEMENT", element) // 这里没有输出，if块未执行
                            return <Badge intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell>{cell[headername]}</Cell>
    })
}

function getRows(mockData) {
    // console.log("GETROWS ROW", mockData)
    return mockData.map(row => {
        // console.log("GETROWS ROW", row.cells)
        return <Row key={row}>{getRow(row.cells)}</Row>
    })
return (
<>
<Table paddingStyle="compact">
  <Header>
    {getHeadings(mockData)}
  </Header>
  <Body>
    {getRows(mockData)}
  </Body>
</Table>

JSON数据 #

[
    {
      "key": "row-0",
      "cells": [
        { "key": "cell-0", "headername":"Name", "CName": "Patient One" },
        { "key": "cell-1", "headername":"Reg ID","CID": "C- 001" },
        { "key": "cell-2", "headername":"Label","CLabel": ["In", "Out"] }
      ]
    }
]

Table Props #

• Table PROPS：
  • Prop: Children
  • Type: Node
  • Default: []
  • 描述：表格的子内容，包含表头或表体
• Table Header Props：
  • Prop: Children
  • Type: Node
  • Default: []
• Table Header Cell Props：
  • Prop: Children
  • Type: Node
  • Default: []
  • 描述：列头显示内容
• Table Row Props：
  • Prop: Children
  • Type: Node
  • Default: []
  • 描述：行内的表格单元格
• Table Cell Props：
  • Prop: Children
  • Type: Node
  • Default: []
  • 描述：单元格显示内容

解决方法 #

1. 修复语法错误（表体不渲染核心原因） #

getRows函数末尾缺少闭合的}，导致组件render逻辑中断，控制台错误由此引发。补全后代码片段：

function getRows(mockData) {
    return mockData.map(row => {
        return <Row key={row.key}>{getRow(row.cells)}</Row>
    })
} // 补全这个闭合括号

2. 修复数据字段匹配逻辑（解决if块未执行问题） #

JSON数据中headername是表头文本，实际数据存储在独立字段（如headername="Label"对应CLabel），代码用cell[headername]取值无法匹配，导致if分支不触发。

方案一：统一数据结构（推荐）

调整JSON，让每个cell的实际值用value字段统一存储：

[
    {
      "key": "row-0",
      "cells": [
        { "key": "cell-0", "headername":"Name", "value": "Patient One" },
        { "key": "cell-1", "headername":"Reg ID","value": "C- 001" },
        { "key": "cell-2", "headername":"Label","value": ["In", "Out"] }
      ]
    }
]

对应修改getRow函数：

function getRow(cells) {
    return cells.map(cell => {
        const {value} = cell;
        if(Array.isArray(value)){
            return (
                <Cell key={cell.key}>
                    {
                        value.map((element, idx) => {
                            console.log("ELEMENT", element)
                            return <Badge key={idx} intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell key={cell.key}>{value}</Cell>
    })
}

方案二：适配现有数据结构

若无法修改JSON，动态获取cell中除key和headername外的字段：

function getRow(cells) {
    return cells.map(cell => {
        const dataKey = Object.keys(cell).filter(k => !['key', 'headername'].includes(k))[0];
        const cellValue = cell[dataKey];
        
        if(Array.isArray(cellValue)){
            return (
                <Cell key={cell.key}>
                    {
                        cellValue.map((element, idx) => {
                            console.log("ELEMENT", element)
                            return <Badge key={idx} intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell key={cell.key}>{cellValue}</Cell>
    })
}

3. 修复key有效性 #

• Row组件key改用row.key，避免直接用对象作为key引发警告
• Cell组件key改用cell.key，替代不稳定的cell.toString()
• 数组渲染的Badge添加唯一key（如索引或元素值）

最终修正后的完整代码示例 #

const Table = ({mockData}) => {

function getHeadings(mockData) {
    return mockData[0].cells.map(heading => {
        return <HeaderCell key={heading.key}>{heading.headername}</HeaderCell>
    })
}

function getRow(cells) {
    return cells.map(cell => {
        const dataKey = Object.keys(cell).filter(k => !['key', 'headername'].includes(k))[0];
        const cellValue = cell[dataKey];
        
        if(Array.isArray(cellValue)){
            return (
                <Cell key={cell.key}>
                    {
                        cellValue.map((element, idx) => {
                            console.log("ELEMENT", element)
                            return <Badge key={idx} intent={element} text="Primary" />
                        })
                    }
                </Cell>
            )
        }
        return <Cell key={cell.key}>{cellValue}</Cell>
    })
}

function getRows(mockData) {
    return mockData.map(row => {
        return <Row key={row.key}>{getRow(row.cells)}</Row>
    })
}

return (
<>
<Table paddingStyle="compact">
  <Header>
    {getHeadings(mockData)}
  </Header>
  <Body>
    {getRows(mockData)}
  </Body>
</Table>
</>
)
}

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