setState not working with forloop in react function - reactjs

Question

I am nesting two api calls inside componentDidMount, everything working fine, the only issue I have is the state do not update so I put some console logs to see what's going on
fetch reviews done!
analysis done!
false
analysis done!
false
analysis done!
false
As you can see the state of loaded never get updated and by the way no data show up on the application, I probably messed up the logic with this function but I can't figure this out.
componentDidMount = () => {
this.setState({ loading: true });
fetch(
"https://url-one.com",
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"X-Spree-Token": "xxx"
}
}
)
.then(response => response.json())
.then(responseJson => {
console.log('fetch reviews done!')
this.setState(
{
list: responseJson.reviews,
},
() => {
var obj = this.state.list;
var data = [];
for (let i in obj) {
fetch(
"https://url-two.com",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
api_key: "uuu",
data: obj[i].text
})
}
)
.then(response => response.json())
.then(responseJson => {
data.push({'review': obj[i].text, 'analysis': responseJson.results * 100});
});
this.setState({
data: data,
loaded: true,
loading: false,
});
console.log('analysis done!')
console.log(this.state.loaded)
}
}
);
});
}
Of course if I use a separate function to update the state it works!
show = () => {
this.setState({ loaded: true });
};

Answer 1

As you can see the state of loaded never get updated
Because the setState happens asynchronous (not immediately update), using console.log(this.state.loaded) like that won't work as expected, instead, you might use the setState callback as you did with the second fetch, like so:
this.setState(
{
data: data,
loaded: true,
loading: false
},
() => {
console.log('analysis done!');
console.log(this.state.loaded);
}
);
EDIT
I think we should use Promise.all() to make it work, like this:
componentDidMount() {
this.setState({ loading: true });
fetch('https://url-one.com', {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'X-Spree-Token': 'xxx'
}
})
.then(response => response.json())
.then(responseJson => {
console.log('fetch reviews done!');
this.setState(
{
list: responseJson.reviews
},
() => {
var obj = this.state.list;
var data = [];
var fetchArr = [];
for (let i in obj) {
let promise = fetch('https://url-two.com', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
api_key: 'uuu',
data: obj[i].text
})
}).then(response => response.json());
fetchArr.push(promise); // make an array of promises
}
Promise.all(fetchArr).then(values => { //after all promises resolved, we'll receive an array of responseJson, we'll loop through it
values.forEach((responseJson, i) => { //for each responseJson, we push it to the data array
data.push({
review: obj[i].text,
analysis: responseJson.results * 100
});
});
// finally, we update state
this.setState(
{
data: data,
loaded: true,
loading: false
},
() => {
console.log('analysis done!');
console.log(this.state.loaded);
}
);
});
}
);
});
}

Answer 2

You have a couple conflicting processes here that need to get shored up. You don't want to modify state during async actions because internally you will fire off a re-render, so I'd suggest reorganizing a bit. The loaded state is not resolving correctly because you aren't waiting for your subsequent requests to finish. Here is an example: