this.props.onPress 不是函数答案

【问题标题】：this.props.onPress is not a functionthis.props.onPress 不是函数
【发布时间】：2026-01-08 02:45:01
【问题描述】：

我有一个HomePage.js，其中包含关于我们按钮，当我点击该按钮时，我想显示AboutUs.js。 HomePage.js 显示正确，但是，当我单击按钮时，出现以下错误： this.props.onPress 不是函数。（在'this.props.onPress(e)'中，'this.props.onPress'是Object的一个实例）

我有App.js

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import HomePage from './HomePage';
import AboutUs from './AboutUs';


const App = StackNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            header: () => null
        }
    },
    AboutUs: { 
      screen: AboutUs,
        navigationOptions: {
          header: () => null
        }
     }
});

export default App;

然后我有一个可重用的组件Button.js：

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text>{children}</Text>
        </TouchableOpacity>
    );
};

export { Button };

HomePage.js 正在渲染 Button 组件。当我按下它时，我得到上述错误

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Button } from './Button.js';
import AboutUs from './AboutUs';

class HomePage extends Component{

  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <Button
          onPress={() => navigate('AboutUs'), { name: 'About Us' }}
          >About Us</Button>
      </View>
    )
  }
}

export default HomePage;

AboutUs.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class AboutUs extends Component {
    render() {
        return (
      <View>
            <Text>About us!</Text>
      </View>
        );
    }
}

export default AboutUs;

【问题讨论】：

你想在这里传递什么？ onPress={() => navigate('AboutUs'), { name: 'About Us' }} 似乎 `, { name: 'About Us' } 部分是多余的
这不是一个有效的函数引用onPress={() => navigate('AboutUs'), { name: 'About Us' }}
{name: 'About Us'} 将是页面的标题，它在title: navigation.state.params.name 中引用，错误进一步说明In 'this.props.onPress(e)', 'this.props.onPress' is an instance of Object。
正如 Sag1v 和我的评论已经指出的那样。您没有将函数传递给 onPress 道具，而是传递了一些无效的东西（语法错误）。我认为您的意思是将 { name: 'About us' } 对象作为导航函数的第二个参数传递。苏你搞砸了大括号
好的，知道了！让它成为官方答案

标签： javascript reactjs react-native react-navigation

【解决方案1】：

这不是一个有效的函数引用

onPress={() => navigate('AboutUs'), { name: 'About Us' }}

似乎您在函数 ref 中混淆了 { name: 'About Us' }，而不是作为 Button 的道具

【讨论】：

【解决方案2】：

我有一个类似的问题，同样的错误：“this.props.onPress is not a function”我犯的错误是使用：

onPress={this.props.incrementCount()}

正确的语法是：

onPress={ () => this.props.incrementCount()}

后者返回函数的结果。

【讨论】：

【解决方案3】：

对我来说是我错过了一个大括号

onPress={() => {navigate('AboutUs'), { name: 'About Us' }}}

【讨论】：