React渲染报错：已用数组仍提示“Objects are not valid as React child”

嘿，我帮你定位到几个导致报错的问题，咱们一步步来修复：

1. 核心报错原因：Card组件的title传入了对象数组 #

你在Card组件里写了title={this.state.allPeopleResults}，这里直接把整个对象数组传给了title属性。React没办法直接渲染对象数组作为子元素，这就是你看到这个错误的根本原因。你需要把title改成一个字符串，比如固定的标题：title="人员列表"。

2. 组件结构错误：Class组件必须有render方法 #

你的代码里把JSX直接写在了componentDidMount后面，这不符合React Class组件的语法规范。所有要渲染的JSX都应该放在render()方法里。

3. 表格结构错误：tbody里的td没包裹在tr中 #

在tbody的map循环里，你直接返回了<td>，但HTML表格要求每个单元格必须包裹在<tr>行元素里，否则会导致渲染异常。

修正后的完整代码： #

import React, { Component } from 'react';
import axios from 'axios';
import Card from '你的Card组件路径'; // 记得替换成实际的组件路径
import Table from '你的Table组件路径'; // 替换成实际路径
import Col from '你的Col组件路径'; // 替换成实际路径

class TableList extends Component {
  constructor(){
    super();
    this.state = {
      allPeopleResults: [],
      searchName: '',
      searchedNameResults: []
    };
  }

  componentDidMount = () => {
    axios.get('http://localhost:3003/api/getPeople')
      .then(response => {
        console.log(response.data);
        this.setState({ allPeopleResults: response.data });
      })
      .catch(error => {
        console.error('获取数据失败:', error); // 建议加上错误捕获，方便排查问题
      });
  }

  render() {
    return (
      <Col>
        <Card 
          title="人员列表" // 改成字符串类型的标题
          category="Here is a subtitle for this table" 
          ctTableFullWidth 
          ctTableResponsive
          content={
            <Table striped hover>
              <thead>
                <tr>
                  {/* 表头一般是固定字段，比如"姓名""ID"，如果你的需求是动态表头可以再调整 */}
                  <th>姓名</th>
                  <th>ID</th>
                </tr>
              </thead>
              <tbody>
                {this.state.allPeopleResults.map((person, key) => {
                  return (
                    <tr key={key}> {/* 每个td必须包裹在tr行元素内 */}
                      <td>{person.name}</td>
                      <td>{person.id}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
          }
        />
      </Col>
    );
  }
}

export default TableList;

额外小提示： #

• 我调整了thead的内容，因为通常表格表头是固定的字段名，而非循环渲染每条数据的名称，如果你的需求确实是动态表头，可以再针对性修改。
• 给axios请求加上catch分支，能帮你快速排查数据请求环节的问题。

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