ReactJS获取后端数据后表格内容无法在页面正常显示问题

问题现象 #

已完成表格组件前后端对接，后端接口可正常返回数据库存储的数据，但页面表格始终无法渲染出数据行内容。
涉及核心文件：

• 子组件：table.js
• 父组件：TextForm.jsx
  控制台输出的props.Data打印结果：
  

根因定位 #

一共3处核心错误：

1. Axios响应取值错误：Axios返回的是封装后的响应对象，包含status、headers、data等字段，后端实际返回的业务数据存储在response.data字段中。原代码直接将整个响应对象存入Data状态，传入Table组件的并非业务数据数组。
2. 遍历逻辑错误：传入Table的是Axios响应对象而非数组，原代码错误使用Object.entries()做遍历，且Object.entries()返回的是[键名, 键值]格式的二维数组，原代码对遍历项的解构、属性读取逻辑完全错误。
3. 渲染节点无返回值：map遍历的回调函数中，<tr>节点被多余的大括号包裹，没有写return返回该节点，React无法获取到可渲染的DOM元素，自然不会输出表格行。

修复步骤 #

1. 修正父组件Axios响应赋值逻辑 #

找到TextForm组件中handleOnPreview方法的Axios成功回调，将业务数据正确存入状态：

.then(function (response) {
    console.log('request success')
    // 仅取出响应中实际的业务数据存入状态
    setData(response.data);
})

额外说明：原代码中console.log('response ',Data)打印不到最新值是React状态异步更新的正常特性，不属于报错原因。

2. 修正Table组件遍历渲染逻辑 #

重写table.js中tbody部分的渲染代码：

//import Data from './TextForm';

function Table(props) {
    console.log('data type: ', typeof (props.Data));
    console.log('received data: ', props.Data)
    return (
        <table border="1" cellPadding="8">
            <thead>
                <tr>
                    <th>Text No</th>
                    <th>TextArea</th>
                </tr>
            </thead>
            <tbody>
                {/* 先校验数据为非空数组再遍历，避免类型报错 */}
                {Array.isArray(props.Data) && props.Data.length > 0 ?
                    props.Data.map((item)=> {
                        // 必须return要渲染的节点，直接遍历数组即可不需要Object.entries
                        return (
                            <tr key={item.textId}>
                                <td>{item.textId}</td>
                                <td>{item.textArea}</td>
                            </tr>
                        )
                    })
                    : <tr><td colSpan="2">暂无数据</td></tr>
                }
            </tbody>
        </table>
    )
}
export default Table;

修复点说明 #

• 移除错误的Object.entries()调用，状态修正后props.Data本身就是后端返回的数组，直接调用数组map方法遍历即可
• 给map回调增加明确的return，保证React能接收到待渲染的节点
• 用每条数据的唯一标识textId作为列表key，比索引作为key更符合React渲染性能要求
• 增加数组类型校验和空数据兜底，避免非数组、空数据场景下页面报错
• 修正属性读取逻辑，直接从遍历得到的单个数据项item上读取textId、textArea字段

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