在 React Native 中,数据未从一个组件检索到另一个组件,>没有错误消息



正如标题所说,我试图从Flatlist组件发送数据并将其发送到另一个组件(单击列表中的玩具,打开玩具详细信息)。我试过许多不同的方法,但不知道哪一种行不通。这是我最接近它工作的地方,没有错误消息。或者更喜欢使用useState来传递数据

通过flatlist组件传递数据:

import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
import Toy from './Database'
import ToyCard from './ToyCard'
const FLToyCard = ({navigation}) => {

const headerComp = () => {
return(
<View style={{alignSelf: 'center'}}>
<Text style={{fontSize: 25, padding: 10}}>All Toys For Sale</Text>
</View>
)
}
return(
<View>
<FlatList 
data={Toy}
renderItem={({item})=>{const {name, id, image, price, desc, seller, type, longDesc} = item; return(<View style={{flex:1}}><ToyCard name={name} image={image} price={price} desc={desc} seller={seller} id={id} type={type} longDesc={longDesc} onPress={()=>navigation.navigate('ToyDetails', {name, id, image, price, seller, desc, longDesc, type})}/></View>)}}
keyExtractor={(item)=>item.id}
numColumns={2}
ListHeaderComponent={headerComp}
/>
</View>
)
}
export default FLToyCard

检索数据(更希望它被检索到SlugFormat组件中,但它不是一个导航页面,所以为了以防万一,我在这个页面中添加了一个props来查看它是否正在检索数据):

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import SlugFormat from '../Components/SlugFormat'
const ToyDetails = ({navigation, name}) => {
return (
<View>
<SlugFormat navigation={navigation}/>
<Text>{name}</Text>
</View>
)
}
export default ToyDetails

这是基于在我的上一篇文章中有人试图给我的帮助,如果有必要,你可以在这里看到它。

当你进入任何使用导航的页面时,这个道具会在route.params中被接收

const ToyDetails = ({route,navigation}) => {
const {name } =route.params
return (
<View>
<SlugFormat navigation={navigation}/>
<Text>{name}</Text>
</View>
)
}

最新更新