React Native函数调用失败：报错this2.sampleFunction不是对象

Hey there, let's tackle that frustrating this2.sampleFunction is not an object error you're facing. Since you mentioned you've already tried adding a constructor for binding, let's walk through other common fixes and checks that might resolve this issue:

1. Use Arrow Functions for Class Methods #

If your sampleFunction is a class method, defining it as an arrow function automatically binds it to the component instance—this avoids the need for manual constructor binding and often fixes this-style errors. Here's how it looks:

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

class Deck extends Component {
  // Arrow function auto-binds `this` to the component instance
  sampleFunction = () => {
    console.log('Function called successfully!');
    // Your logic here
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* No need to bind here—arrow function handles it */}
        <TouchableOpacity onPress={this.sampleFunction}>
          <Text>Trigger Sample Function</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Deck;

2. Verify this in Callback Scenarios #

If you're calling sampleFunction inside a callback (like map loops, timers, or async operations), make sure this still points to your component instance:

• Bad: Regular function in map loses this context

  renderItems() {
    // `this` here doesn't refer to the component instance
    return this.props.cards.map(function(card) {
      return <Card onPress={this.sampleFunction} key={card.id} />;
    });
  }
  

• Good: Use arrow functions in callbacks

  renderItems() {
    return this.props.cards.map((card) => {
      // Arrow function preserves the component's `this` context
      return <Card onPress={this.sampleFunction} key={card.id} />;
    });
  }
  

Alternatively, you can store this in a variable (like const self = this;) at the start of the method and use self.sampleFunction inside the callback.

3. Ensure You're Instantiating the Component Correctly #

Double-check that you're rendering your Deck component as a JSX element, not calling it like a regular function:

• Wrong: Calling the component as a function breaks this

  // This will cause `this` to be undefined inside Deck
  const deck = Deck();
  

• Right: Render as a JSX component

  <Deck />
  

4. Check for Accidental this Overwrites #

Make sure you haven't accidentally redefined this inside sampleFunction or any parent method. For example, avoid code like this:

sampleFunction() {
  // This overwrites the component's `this`
  var this = someOtherValue;
  // ... rest of your code
}

If you can share a snippet of your actual Deck component code (especially where sampleFunction is defined and called), we can narrow this down even further—but these steps should cover most common causes of this error.

内容的提问来源于stack exchange，提问作者user5762989