Undefined is not a function – react-native onPress

huangapple go评论58阅读模式
英文:

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 – react-native onPress
Undefined is not a function – react-native onPress

英文:

undefined is not a function error that points to this line in my code:

onPress={() =&gt; 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) =&gt; {
  // Function logic to handle the card press event
  console.log(&#39;Card pressed!&#39;, item);
};

Here is my PopularJobCard.jsx:

import { View, Text, TouchableOpacity, Image } from &#39;react-native&#39;

import styles from &#39;./popularjobcard.style&#39;

import { checkImageURL } from &#39;../../../../utils&#39;


const PopularJobCard = ({ item, selectedJob, handleCardPress}) =&gt; {
  return (
    &lt;TouchableOpacity
      style={styles.container(selectedJob, item)}
      // onPress handleCardPress on item
      onPress={() =&gt; handleCardPress(item)}
    &gt;
      &lt;TouchableOpacity style={styles.logoContainer(selectedJob, item)}&gt;
        &lt;Image
        source={{ uri: checkImageURL(item?.employer_logo)
              ? item.employer_logo
              : &quot;https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg&quot;,
          }}
          resizeMode=&quot;contain&quot;
          style={styles.logoImage}/&gt;
      &lt;/TouchableOpacity&gt;
      &lt;Text style={styles.companyName} numberOfLines={1}&gt;{item.employer_name}&lt;/Text&gt;
      &lt;View style={styles.infoContainer}&gt;
        &lt;Text style={styles.jobName(selectedJob, item)} numberOfLines={1}&gt;{item.job_title}
        &lt;/Text&gt;
        &lt;Text style={styles.location}&gt;{item.job_country}&lt;/Text&gt;
      &lt;/View&gt;

    &lt;/TouchableOpacity&gt;
  )
}

export default PopularJobCard

Undefined is not a function – react-native onPress
Undefined is not a function – react-native onPress

答案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.

huangapple
  • 本文由 发表于 2023年6月9日 06:09:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76436003.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定