如何在 React Native 中将数据提取到我的数据表中

Question

我想将数据提取到我的数据表中，但出现此错误： index.js:1 警告：函数作为 React 子项无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。 如果 Somone 可以帮助我，这就是守则 🙏🏻:

import React, { useState,useEffect } from 'react';
import { StyleSheet, SafeAreaView, ScrollView,Text, View, Modal } from 'react-native';
import { DataTable } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';


const List = ({navigation}) => {



     const [data,setData] = useState([])
     const [loading,setLoading]= useState(true)


     const fetchData = ()=>{
        fetch("https://flow.simpas.ai/hortus/paysagiste/category?businessid=0899607494")
        .then(res=>res.json())
        .then(results=>{

            setData(results)
            setLoading(false)


        })
     }

     useEffect(()=>{
          fetchData()
     },[])


  const renderList = ((item)=>{

    return(

      <DataTable.Row style={styles.tableRow} key={item.businessid}>
            <DataTable.Cell textStyle={{color: '#777777',fontFamily: 'Roboto'}} onPress={() => navigation.navigate("Edit",{item})} >{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#FEB296', fontFamily: 'Roboto'}}>{item.title}</DataTable.Cell>
            <DataTable.Cell textStyle={{color: '#777777', fontFamily: 'Roboto'}}>{item.price}</DataTable.Cell>
        </DataTable.Row>
    )
  })
return (
  <SafeAreaView style={{ flex: 1}}>
  <ScrollView
    contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
    <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold', fontFamily: 'Roboto',textAlign: 'center'}}>
      List of Companies
    </Text>
    <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10, fontFamily: 'Roboto', textAlign: 'center'}}>
      Check Our Companies Details
    </Text>
  <DataTable style={styles.container}   >
  <DataTable.Header style={styles.tableHeader}  >
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>BusinessId</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Title</DataTable.Title>
    <DataTable.Title textStyle={{color: '#fff',fontSize: 16, fontFamily: 'Roboto'}}>Price</DataTable.Title>
  </DataTable.Header>
  </DataTable>
    {renderList}
  </ScrollView>
  </SafeAreaView>


);
};

export default List;

const styles = StyleSheet.create({
container: {
    padding: 0,
},
tableHeader: {
  backgroundColor: '#50E3C2',
},
tableRow: {
  backgroundColor: '#fff',
},

});

这是错误的捕获：

Answer 1

1. 请使用

   {renderList()}

   代替

   {renderList}

   。
2. 在

   {renderList()}

   和

   </DataTable.Header>

   之间使用

   </DataTable>

   ...而不是在

   </DataTable>

   之后。