React应用可获取数据库数据但无法正常渲染显示数据问题排查

你这个问题不是实现思路错了，也没有致命语法错误，是两个非常典型的新手联调坑：

• 字段名大小写不匹配：.NET Core 6默认的JSON序列化规则会把C#端的帕斯卡命名（比如Id、Name）自动转成小驼峰格式（id、name）返回给前端。你前端代码里写的取值是dep.Id、dep.Name这类大写字段，实际接口返回的数据里字段都是小写开头，取值结果全是undefined，自然渲染出来的td是空的——这也刚好对应你说的“td标签能生成、固定的EDIT/DELETE列正常显示，就是业务字段没内容”的现象。
• 无限请求循环bug：你写的componentDidUpdate钩子没有加任何判断条件，只要组件state更新（比如你拉到接口数据调用setState）就会重新触发refreshList，拉到数据再setState再触发更新，死循环刷接口，很容易导致渲染时序异常。

1. 对齐前后端字段名
   先在refreshList里加一句日志打接口原始返回值，确认实际字段格式：

   refreshList(){
       fetch(process.env.REACT_APP_API+'staff')
       .then(response => response.json())
       .then(data => {
           console.log('接口返回的员工数据：', data) // 打日志看字段名
           this.setState({deps:data})
       })
   }
   

   90%概率你看到返回的字段是小写开头的，把render里map的取值字段改成和返回一致即可，参考修正后的渲染逻辑：

   <tbody>
       {deps.map(dep => <tr key={dep.id}>
           <td>{dep.id}</td>
           <td>{dep.name}</td>
           <td>{dep.surname}</td>
           <td>{dep.rank}</td>
           <td>{dep.birthday}</td>
           <td>{dep.dateOfJoining}</td>
           <td>EDIT / DELETE</td>
       </tr>)}
   </tbody>
   

   如果你不想改前端，也可以改后端.NET Core的序列化配置，让它直接返回大写字段，在Program.cs里加下面的配置即可，但更推荐前后端统一用小驼峰的前端友好命名：

   builder.Services.AddControllers()
       .AddJsonOptions(opt =>
       {
           opt.JsonSerializerOptions.PropertyNamingPolicy = null; // 不转换字段名大小写，保留C#端的帕斯卡格式
       });
   

2. 修复无限循环问题
   直接删掉整个componentDidUpdate方法即可——你当前场景只需要在组件首次加载的时候拉一次列表，后续新增/编辑/删除操作完成之后手动调用refreshList刷新就行，不需要每次组件更新都拉数据。如果后续确实需要根据某个参数变化自动刷新，一定要加比较逻辑，避免无脑触发请求：

   componentDidUpdate(prevProps) {
       // 只有当查询部门的参数变化时才刷新，其他state/prop变化不触发
       if (prevProps.departmentId !== this.props.departmentId) {
           this.refreshList();
       }
   }
   

改完之后刷新页面，看控制台接口返回的字段名和前端取值完全一致，td标签里就会正常填充数据，你附的优化后表格截图里的空行问题会直接解决。

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