时间戳

首页 > 解决方案 > 尝试生成动态表格内容时出错：对象作为 React 子项无效

reactjs - 尝试生成动态表格内容时出错：对象作为 React 子项无效

问题描述

我对 React Native 很陌生，有一件事对我不起作用，我希望它起作用。也许有人可以告诉我我错在哪里或建议正确的方法。

我有一些可以表示为表格的数据。具有任意数量/名称的列。所以我想在应用程序中绘制一个动态表格。

数据示例如下所示：

{
    "columns": ["column1", "column2"],
    "results": [
        {"column1": "test", "column2": "passed"},
        {"column1": "second test", "column2": "passed as well"}
    ]
}

因此，我想绘制一张表格（例如 via DataTable from react-native-paper，尽管它可以是任何其他类型的表格），例如：

<DataTable>
  <DataTable.Header>
    <DataTable.Title>column1</DataTable.Title>
    <DataTable.Title>column2</DataTable.Title>
  </DataTable.Header>

  <DataTable.Row>
    <DataTable.Cell>test</DataTable.Cell>
    <DataTable.Cell>passed</DataTable.Cell>
  </DataTable.Row>

  <DataTable.Row>
    <DataTable.Cell>second test</DataTable.Cell>
    <DataTable.Cell>passed as well</DataTable.Cell>
  </DataTable.Row>
</DataTable>

所以我现在正在做的是：（代码被简化以说明问题）

const drawTable = (data) => {
    const result = JSON.parse(data)

    let content = `<DataTable><DataTable.Header>`
    result.columns.forEach(function(element, idx, array) {
        content += `<DataTable.Title>${element}</DataTable.Title>`
    })
    content += `</DataTable.Header>`
  
    result.results.forEach(function (element, idx, array) {
        content += `<DataTable.Row>`
        result.columns.forEach(function (column, idx, array) {
            content += `<DataTable.Cell>${element[column]}</DataTable.Cell>`
        })
        content += `</DataTable.Row>`
    })

    content += `</DataTable>`
    return (
        {content}
    )
}

const HomeScreen = (props) => {
    const [data, setData] = React.useState(null)
    <View>
        {drawTable(data)}  //here the data is already a valid JSON with format as mentioned above
    </View>

}

我得到的是以下错误：

Objects are not valid as a React child (found: object with keys {content}). If you meant to render a collection of children, use an array instead.

所以基本上我想从动态构建的字符串中生成一个组件。这样做的正确方法是什么？

谢谢！

标签： reactjsreact-nativedynamic

解决方案

试试这个，避免使用 idx 作为键，我只用于实际目的。

import * as React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card, DataTable } from 'react-native-paper';

export default function App() {
  const data = {
    columns: ['column1', 'column2'],
    results: [
      { column1: 'test', column2: 'passed' },
      { column1: 'second test', column2: 'passed as well' },
    ],
  };

  const { columns, results } = data;

  return (
    <SafeAreaView style={styles.container}>
      <DataTable>
        <DataTable.Header>
          {columns.map((column, idx) => (
            <DataTable.Title key={column}>{column}</DataTable.Title>
          ))}
        </DataTable.Header>
        {results.map((result, idx) => (
          <DataTable.Row key={idx}>
            {columns.map((element) => (
              <DataTable.Cell>{result[element]}</DataTable.Cell>
            ))
          }
          </DataTable.Row>
        ))}
      </DataTable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    paddingTop: 50,
  },
});

这是一个小吃：https ://snack.expo.dev/MnkVd6B1e ，您可以使用 expo 运行它

推荐阅读