英文:
Undefined is not a function - react-native onPress
问题
未定义的错误不是一个函数错误,指向我的代码中的这一行:
onPress={() => handleCardPress(item)}
我正在按照这个教程操作:
React-Native App
我尝试添加以下内容来测试是否有任何更改,但我收到了相同的错误:
const handleCardPress = (item) => {
// 处理卡片按下事件的函数逻辑
console.log('卡片被按下了!', item);
};
这是我的PopularJobCard.jsx文件:
import { View, Text, TouchableOpacity, Image } from 'react-native'
import styles from './popularjobcard.style'
import { checkImageURL } from '../../../../utils'
const PopularJobCard = ({ item, selectedJob, handleCardPress}) => {
return (
<TouchableOpacity
style={styles.container(selectedJob, item)}
// 在项目上按下时执行handleCardPress
onPress={() => handleCardPress(item)}
>
<TouchableOpacity style={styles.logoContainer(selectedJob, item)}>
<Image
source={{ uri: checkImageURL(item?.employer_logo)
? item.employer_logo
: "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",
}}
resizeMode="contain"
style={styles.logoImage}/>
</TouchableOpacity>
<Text style={styles.companyName} numberOfLines={1}>{item.employer_name}</Text>
<View style={styles.infoContainer}>
<Text style={styles.jobName(selectedJob, item)} numberOfLines={1}>{item.job_title}
</Text>
<Text style={styles.location}>{item.job_country}</Text>
</View>
</TouchableOpacity>
)
}
export default PopularJobCard
英文:
undefined is not a function error that points to this line in my code:
onPress={() => handleCardPress(item)}
I'm following along with this tutorial:
React-Native App
I tried adding this to test if anything changed but I got the same error:
const handleCardPress = (item) => {
// Function logic to handle the card press event
console.log('Card pressed!', item);
};
Here is my PopularJobCard.jsx:
import { View, Text, TouchableOpacity, Image } from 'react-native'
import styles from './popularjobcard.style'
import { checkImageURL } from '../../../../utils'
const PopularJobCard = ({ item, selectedJob, handleCardPress}) => {
return (
<TouchableOpacity
style={styles.container(selectedJob, item)}
// onPress handleCardPress on item
onPress={() => handleCardPress(item)}
>
<TouchableOpacity style={styles.logoContainer(selectedJob, item)}>
<Image
source={{ uri: checkImageURL(item?.employer_logo)
? item.employer_logo
: "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",
}}
resizeMode="contain"
style={styles.logoImage}/>
</TouchableOpacity>
<Text style={styles.companyName} numberOfLines={1}>{item.employer_name}</Text>
<View style={styles.infoContainer}>
<Text style={styles.jobName(selectedJob, item)} numberOfLines={1}>{item.job_title}
</Text>
<Text style={styles.location}>{item.job_country}</Text>
</View>
</TouchableOpacity>
)
}
export default PopularJobCard
答案1
得分: 0
你需要将一个名为handleCardPress
的函数提供给PopularJobCard
,就像它是一个属性一样。在你分享的存储库中有一个示例:
https://github.com/adrianhajdin/project_react_native_jobs/blob/main/components/home/popular/Popularjobs.jsx#L51
在这个示例中,他们定义了一个名为'handleCardPress'的函数,并将它传递给了使用它的组件。这样,PopularJobCard就可以灵活地接受不同的函数。
英文:
You need to provide a function as handleCardPress
to PopularJobCard
like it's a prop. There's an example of this in the repo you've shared:
https://github.com/adrianhajdin/project_react_native_jobs/blob/main/components/home/popular/Popularjobs.jsx#L51
In the example, they define a function 'handleCardPress' and pass it to the component where it's used. This way PopularJobCard is flexible to accept different functions.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论