React渲染PostgreSQL数据表格时出现Uncaught TypeError错误求助

错误根本原因及修复方案 #

核心问题1：mapResults返回了错误的数据格式 #

你的TableWithSearch组件需要接收结构化的数据对象数组（比如后端返回的原始数据格式），但你现在把后端返回的数据转换成了<li>元素数组传给data属性。组件在处理这些JSX元素时，尝试读取和searchable相关的属性，自然找不到对应值，抛出undefined错误。

核心问题2：mapResults里的赋值逻辑完全错误 #

{results.id = {index}}这行代码是给整个results数组加id属性，不是给单个数据项设置id，而且绝对不能在JSX渲染表达式里做数据赋值操作。

修复步骤： #

1. 修正mapResults，返回处理后的原始数据对象数组
   只对原始数据做字段补充（比如添加id），不要直接渲染成JSX：

   const mapResults = (rawResults) => {
     return rawResults.map((result, index) => ({
       ...result, // 保留原数据所有字段
       id: index // 给每个数据项添加id字段
     }));
   }
   

2. 确保TableWithSearch拿到正确的data
   现在setResults(mapResults(data))会把处理好的原始数据数组存入state，组件能正常解析数据。

3. 可选：补充columns的searchable配置
   如果TableWithSearch默认要求列配置包含searchable属性，给每个column加上该字段：

   const columns = [{
       id: 0,
       dataField: 'test_name',
       text: 'test_name',
       sort: true,
       visible: true,
       searchable: true
     },
     // 其他列同理添加searchable字段
   ]
   

修复后的关键代码片段 #

function ResultsFunction() {
    const [results, setResults] = useState([]);
    const columns = [{
        id: 0,
        dataField: 'test_name',
        text: 'test_name',
        sort: true,
        visible: true,
        searchable: true
      },{
        id: 1,
        dataField: 'dut_name',
        text: 'name',
        sort: true,
        visible: true,
        searchable: true
      }, {
        id: 2,
        dataField: 'dut_ip',
        text: 'ip',
        sort: true,
        visible: true,
        searchable: true
      }, {
        id: 4,
        dataField: 'load',
        text: 'load',
        sort: true,
        visible: true,
        searchable: true
      }]
     
    useEffect(() => {
        fetch("http://12.12.12.12:9000/")
          .then((resp) => resp.json())
          .then((data) => {
            setResults(mapResults(data))
          });
      }, []);

    const mapResults = (rawResults) => {
      return rawResults.map((result, index) => ({
        ...result,
        id: index
      }));
    }

    return (
      <TableWithSearch
        data={results}
        columns={columns}
      />
    );
}

export default ResultsFunction;

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