react-native-router-flux refreshing component with Replace, Reset, and Refresh

Question

So I've been using ignite CLI which includes react-native-router-flux.

My question is, I'm having a data from props which will be uploaded to the database when the user press 'apply' here's the code

<TouchableOpacity style={styles.button} onPress={this.onApply.bind(this)}> <Text style={styles.buttonText}>Apply</Text> </TouchableOpacity>

async onApply(){

var token = await AsyncStorage.getItem(STORAGE_KEY)
var url = "http://purwadhikaconnect.southeastasia.cloudapp.azure.com/api/applicants"
var jobId = this.props.jobData.Id
console.log('int?', jobId);
var config = {
  method: "POST",
  headers:{
    'Content-Type' : 'application/json',
    'Accept' : 'application/json',
    "Authorization" : 'Bearer ' + token
  },
  body: JSON.stringify({
    JobId : parseInt(jobId)
  })
}

return fetch(url, config).then((response) => response.json())
.then(this.setState({
  isApplied: true,
})).then((response) =>{Alert.alert('Job Applied Successfully')})
.then(this.setState({currentApplicant: this.state.currentApplicant + 1})) //trying to manipulate the value
.then(NavigationActions.Jobs({type: 'reset'}))
.catch((exception) => {Alert.alert('You have applied for this job!')})

}

now the data is successfully uploaded but it wont automatically refresh. I've been using component update lifecycle such as shouldComponentUpdate() and you could see that my Action type there is reset. Now the issue with using Actionconst.replace is that my menu button will be replaced with back button. And if I use ActionConst.refresh() it wont refresh as well. Please help me I've been dealing with this for months and I've tried almost everything to solve it but to no avail and its getting frustrating...;(

Answer 1

I think the issue is that you're passing setStates as an argument of your .then's, try changing it to this:

.then((response) => this.setState({ isApplied: true }))