The function setState, along with all other functions, is not defined within the promise's .then() method

Question

The function setState, along with all other functions, is not defined within the promise's .then() method

Currently, I am in the process of developing a React application that retrieves data from Firebase.

Whenever I use the function below to delete a record, my attempt to refresh the page and display an updated view without the deleted record fails:

deleteWorkout(id, e) {
  e.preventDefault();
  fire.database().ref("athlete")
    .child(id).remove() // <-- This works

  // The following code does not work! 
  // Error: '_this4.getAthleteData' is undefined) 
  .then(() => this.getAthleteData().bind(this)) 
  .catch(e => console.log(e));

}

I have already defined the getAthleteData() function, so I assume it might be related to a scope issue within the Promise?

getAthleteData() {...}

Any attempts to call

this.setState({...})

also results in the same error message being displayed.

javascript firebase firebase-realtime-database ecmascript-6 promise

Answer 1

Answer №1

There are multiple concerns to address:

1) When calling a function from your class, using the this keyword is necessary.

2) The function must be bound correctly in order to call it. There are various solutions available for this issue.

One option is to utilize arrow functions which automatically bind to their parent scope.
You can also bind this in your constructor and override the method like this:
```
this.deleteWorkout = this.deleteWorkout.bind(this);
```
Alternatively, when calling the function, you can pass this as an argument like so:
```
(this.deleteWorkout.bind(this))()
```
. For cases where only the function handle is needed, such as for an onClick event on a button, you can use this.deleteWorkout.bind(this).

Ultimately, the code snippet below should function properly.

deleteWorkout = (id, e) => {
  e.preventDefault();
  fire.database().ref("athlete")
    .child(id).remove();
  .then(() => this.getAthleteData()) 
  .catch(e => console.log(e));
}

Answer 2

There are multiple concerns to address:

1) When calling a function from your class, using the this keyword is necessary.

2) The function must be bound correctly in order to call it. There are various solutions available for this issue.

One option is to utilize arrow functions which automatically bind to their parent scope.
You can also bind this in your constructor and override the method like this:
```
this.deleteWorkout = this.deleteWorkout.bind(this);
```
Alternatively, when calling the function, you can pass this as an argument like so:
```
(this.deleteWorkout.bind(this))()
```
. For cases where only the function handle is needed, such as for an onClick event on a button, you can use this.deleteWorkout.bind(this).

Ultimately, the code snippet below should function properly.

deleteWorkout = (id, e) => {
  e.preventDefault();
  fire.database().ref("athlete")
    .child(id).remove();
  .then(() => this.getAthleteData()) 
  .catch(e => console.log(e));
}

Answer 3

Answer №2

Your code appears to be missing the necessary context binding with either bind() or the fat arrow function (=>).

Answer 4

Your code appears to be missing the necessary context binding with either bind() or the fat arrow function (=>).

Answer 5

Answer №3

Do you believe it is necessary to call getAthleteData() like this.getAthleteData()

deleteWorkout(id, e) {
      e.preventDefault();
      fire.database().ref("athlete")
        .child(id).remove() // <-- This method works

      // Unfortunately, this does not work! 
      //Error: '_this4.getAthleteData' is undefined) 
      .then(() => this.getAthleteData()) //instead of calling getAthleteData()
      .catch(e => console.log(e));
    }

It's possible that I am mistaken

Answer 6

Do you believe it is necessary to call getAthleteData() like this.getAthleteData()

deleteWorkout(id, e) {
      e.preventDefault();
      fire.database().ref("athlete")
        .child(id).remove() // <-- This method works

      // Unfortunately, this does not work! 
      //Error: '_this4.getAthleteData' is undefined) 
      .then(() => this.getAthleteData()) //instead of calling getAthleteData()
      .catch(e => console.log(e));
    }

It's possible that I am mistaken

The function setState, along with all other functions, is not defined within the promise's .then() method

Answer №1

Answer №2

Answer №3

Similar questions

Angular - Ensure completion of a function call before continuing with the code execution

Creating TypeScript domain objects from JSON data received from a server within an Angular app

The navigation bar is positioned with white space above it

Unusual Behavior of JavaScript for..in and enum

Tips for submitting an e-mail through an HTML form with the help of Node.js and Gulp

Output text in Javascript (not to the console)

"Code snippets customized for React are not functioning properly in the javascriptreact.json file within Visual Studio Code

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

What is the best way to select an element that is currently visible but hidden underneath another element?

The functionality of JQuery's `.on("click"... is sporadically functioning

Unable to produce scrolling animation using JavaScript

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

Benefits of using props destructuring in React - beyond just being a syntactic shortcut

Getting the value of a button using JavaScript

Tips for overriding ng-disable in AngularJSUnleashing the

When attempting to implement sound on hover with an <a attribute containing an image>, the functionality is not functioning as expected

Update the state when a button is clicked and send a request using Axios

Objects vanish 10 seconds after appearing [Angular2, *ngFor]

php script within a literal .tpl file

Create a new class in the body tag using Javascript