React Native动态生成表格报错Objects are not valid as React child求助

云原生阿岚

2026-10-1

核心问题说明

你当前的实现思路存在两个错误，直接导致了报错和无法达到预期效果：

你试图通过拼接字符串的方式生成JSX组件，但React不能将普通字符串识别为组件实例，只会将其当作普通文本处理，无法渲染出对应的表格组件
你在drawTable函数最后返回了{content}，这是一个包含content属性的对象，React不支持直接将对象作为子元素渲染，这就是你看到的报错的直接原因

正确实现方案

直接使用JSX的动态渲染能力，通过数组遍历的方式生成对应组件即可，不需要拼接字符串。完整代码如下：

import React from 'react';
import { View } from 'react-native';
import { DataTable } from 'react-native-paper';

const drawTable = (data) => {
  // 空值边界处理，防止数据未加载完成时报错
  if (!data) return null;
  const result = JSON.parse(data);

  return (
    <DataTable>
      {/* 动态渲染表头 */}
      <DataTable.Header>
        {result.columns.map((column, index) => (
          <DataTable.Title key={index}>{column}</DataTable.Title>
        ))}
      </DataTable.Header>

      {/* 动态渲染表格行 */}
      {result.results.map((row, rowIndex) => (
        <DataTable.Row key={rowIndex}>
          {result.columns.map((column, colIndex) => (
            <DataTable.Cell key={colIndex}>{row[column]}</DataTable.Cell>
          ))}
        </DataTable.Row>
      ))}
    </DataTable>
  );
};

const HomeScreen = (props) => {
  const [data, setData] = React.useState(null);
  
  // 组件必须返回渲染的视图结构
  return (
    <View>
      {drawTable(data)}
    </View>
  );
};