我如何获取数据到我的Datatable在React Native?

Question

我想获取数据到我的数据表我得到这个错误:函数是无效的作为一个React的孩子。如果你返回一个组件而不是从渲染中返回，可能会发生这种情况。或者你想调用这个函数而不是返回它。

这是代码，如果有人可以帮助我🙏🏻:

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

哈喽Hassane。这个React错误很常见，不用担心。问题是，您试图(错误地)呈现一个函数而不是一个组件(如错误所示)。在你的代码中，这会发生在这里:

{...}
{renderList}
{...}

renderlist是一个函数，所以你不能渲染它。

这里有两个选项:

• 调用函数:{renderList()}
• 使用JSX组件(推荐)):

const RenderList = (item)=>{...} //Use capital as first char to follow convention here

{...}
</DataTable>
<RenderList />
</ScrollView>
{...}

编辑:

对于要呈现的数据，您需要循环遍历它并将信息发送给组件:

const RenderCollection = ({item}) => // note that args has changed here, {item} its a shortcut to avoid the need to use props.item 

{...}
</DataTable>
{
data && data.articles.map(article => <RenderCollection item={article} />)
}
</ScrollView>
{...}