Setting State on react native alert's onPress error - reactjs

Question

I find myself in a situation where I am needed to set the state of app upon the onPress of alert in react native. I am implemented the code below
Alert.alert(
'Delete Program',
'Are you sure you want to delete this program?',
[
{text: 'OK', onPress: () => this.doRefreshState()},
],
{ cancelable: false }
)
doRefreshState = () =>{
console.warn("i made it here")
this.setState({})
}
The error response is:
"_this2.doRefreshState is not a function.(in '_this2.doRefreshState()','_this2,doRefreshState; is undefined).
Please note that the alert is in another function

Answer 1

First, as a comment in general I would strongly suggest giving a more complete example so we have more information (including your version of React Native and the target OS).
My guess is that your method is not actually bound to the class instance, or in the case of a pure function, is not accessible. Using ES6 syntax you might try something like this:
class YourComponent extends React.Component {
doRefreshState() {
console.warn('method called') //personally I would use an alert here to verify
this.setState({})
}
renderAlertContainer() {
const onPressHandler = () => { //Bind to "this" with the lambda
this.doRefreshState()
}
return (
<Button onPress={()=>{
Alert.alert(
'Delete Program',
'Are you sure you want to delete this program?',
[
//{text: 'OK', onPress: () => this.doRefreshState()},
{ text: 'OK', onPress: onPressHandler }
],
{ cancelable: false }
) }} />
)
}
render() {...}
}
The reason I would format it this way is for (1) readability, it shows what "this" I meant, and (2) because I'm not actually sure what "this" refers to when it is transpiled by babel/webpack/whatever (and "this" has been a problematic language feature in JavaScript for many developers). You could probably jump into the debugger and figure out what "this2" actually is, but my guess is that it isn't bound to the object you think it is.
Secondly, depending on how your class/object/function is constructed you might need to explicitly bind the function to the prototype rather than the instance. In that case the easiest solution (in my opinion) is to simply add it in the constructor:
class.....
{
constructor(props) {
super(props)
this.doRefreshState = this.doRefrestState.bind(this) //annoying but now this method is bound to the class and I can act on it no matter the lifecycle state.
}
}
Without a clear picture of how the React.Component is initialized I can't really say for sure but I suspect either the method needs to be bound to the instance (prototype) or that the this object in the alert method is, in fact, executing in the context of the alert and not your class and, thus, is undefined.
My preferred technique to fix that category of error is to pull the handler out into a variable and then assign it so that whenever it is called the correct context is explicit rather than implicit (implied).
I should note: I just pushed out an Android React Native App to a client and I ran into problems very similar to this more often than I should have. Pulling the handlers out of the methods solved the problem in my Third party calls almost every time. Frankly, I'm just guessing at the cause of this issue as I didn't crawl into the debugger and figure it out, but I suspect one of my two solutions here will fix it.

Answer 2

Try binding the function instead of calling it.
Example:
Alert.alert(
'Delete Program',
'Are you sure you want to delete this program?',
[
{text: 'OK', onPress: this.doRefreshState},
],
{ cancelable: false }
)
doRefreshState = () =>{
console.warn("i made it here")
this.setState({})
}
Hopefully this should work as you are using arrow functions. If this does not work try binding the function like.
Alert.alert(
'Delete Program',
'Are you sure you want to delete this program?',
[
{text: 'OK', onPress: this.doRefreshState.bind(this)},
],
{ cancelable: false }
)
doRefreshState() {
console.warn("i made it here")
this.setState({})
}
Hope that helped.

Answer 3

Would check your doRefreshState function is outside the react's lifecycle method? Let's say i am calling this from componentWillMount
componentWillMount(){
Alert.alert(
"Delete Program",
"Are you sure you want to delete this program?",
[{ text: "OK", onPress: () => this.doRefreshState() }],
{ cancelable: false }
);
}
doRefreshState = () => {
alert("i made it here");
this.setState({});
};
render(){}