反应本机：类型错误：未定义不是一个函数(靠近'...data.map...')关于构建一个简单的应用程序

Question

所以，我正在react native上构建一个简单的移动应用程序。在我的历史页面上，我使用react-native-table-component库构建了一个表，在按下表的列时，它会将用户重定向到一个名为"test"的页面。

但是每当我尝试运行应用程序时，它总是显示&;TypeError: undefined不是一个函数(靠近'…data.map…')">

有人能帮忙吗?我已上传代码供参考。

HistoryScreen代码:

import *as React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';
import { useState } from 'react/cjs/react.development';
import { NavigationContainer, TabActions} from '@react-navigation/native';
import test from './test';
import HomeScreen from './HomeScreen';

const tableData={
tableHead: ['Incident Report'],
tableData: [
['Incident#1'],
['Incident#2'],
],
};
const styles=StyleSheet.create({
container: {flex: 1, padding: 10, justifyContent:'center', backgroundColor:'#fff'},
head: { height: 44, backgroundColor: 'darkblue' },
headText: { fontSize: 20, fontWeight: 'bold' , textAlign: 'center', color: 'white' },
text: { margin: 6, fontSize: 16, fontWeight: 'bold' , textAlign: 'center' },
});
export default function HistoryScreen({navigation}){
const [data, setData] = useState(tableData);
return(
<View style={styles.container}>
<Table borderStyle={{borderWidth: 4,borderColor: 'teal'}}>
<Rows onPress={()=> navigation.navigate('HomeScreen')} data={data.tableHead} style={styles.head} textStyle={styles.headText}/> 
<Rows data={data.tableData} textStyle={styles.text}/>
</Table>
</View>
);
}

首页代码

import * as React from 'react';
import {View, Text} from 'react-native';
export default function test(){
return(
<View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
<Text
style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> test </Text>
</View>
);
}
import * as React from 'react';
import {View, Text} from 'react-native';
export default function HomeScreen( {navigation} ){
return(
<View style={{flex: 1, backgroundColor: '#fff',  alignItems: 'center', justifyContent: 'center'}}>
<Text
onPress={()=> alert('This is the "Home" Screen')}
style={{flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center'}}> test test</Text>
</View>
);
}

Answer 1

问题很可能来自您的HistoryScreen代码。这就是错误的来源。

<Rows onPress={()=> navigation.navigate('HomeScreen')} data={data.tableHead} style={styles.head} textStyle={styles.headText}/> 

如果你仔细看你的导入，有两个不同的组件称为Row和Rows。从我在文档中看到的，它似乎有两种不同的数据形状。Row取array,Rows取array中的array。

你的代码应该是这样的:

...
<Table borderStyle={{ borderWidth: 4, borderColor: 'teal' }}>
<Row
onPress={() => navigation.navigate('HomeScreen')}
data={data.tableHead}
style={styles.head}
textStyle={styles.headText}
/>
<Rows data={data.tableData} textStyle={styles.text} />
</Table>
...