Can't fill my state in componentDidMound function - reactjs

Question

inside of my componentDidMount method I'm trying to make array of objects by using fetch. In my head it looks like this - on state I keep variable "loading" (true by default), and when my method is done with fetching it set it to false. On render method I've put if statement. But in real life my method filled array doesn't get executed (first console.log gets executed, second is not), . I'm losing my mind with this.
import { Company } from "../company/company.component";
export class CompanyList extends Component {
constructor(props) {
super(props);
this.state = {
tempResult: 10,
newArray: [],
loading: true,
};
}
componentDidMount = () => {
console.log(this.state.loading,"1");
const filledArray = this.props.companies.map((item) => {
fetch(`xxxx/incomes/${item.id}`)
.then((response) => response.json())
.then((data) => {
let transactionsToFloat = data.incomes.map((item) =>
parseFloat(item.value)
);
let result = transactionsToFloat.reduce((acc, num) => {
return acc + num;
}, 0);
result = Math.round(result * 100) / 100;
this.setState({ tempResult: result, loading: false });
console.log(item.id, item.name, item.city, result);
return {
id: item.id,
name: item.name,
city: item.city,
totalIncome: result,
};
});
this.setState({ loading: false });
return true;
});
this.setState({ newArray: filledArray });
};
render() {
if (this.state.loading) {
return <h1>Loading...</h1>;
} else if (!this.state.loading) {
return (
<div>
{/* <button onClick={this.handleClick}>Button</button> */}
<table>
<thead>
<tr>
<th> Id </th>
<th> Name </th>
<th> City </th>
<th> Total income </th>
</tr>
</thead>
{this.state.newArray.map((item) => (
<Company key={item.id} company={item} />
))}
</table>
</div>
);
}
}
}
Cheers

Answer 1

fetch is async, when you do this.setState({ loading: false }) after fetch, this line of code will be executed right away, before promise is even resolved. you are also not returning the data, but true values instead.
given that you are executing an array of promises, you may consider return fetch promises and wrap your array of promises with a Promise.all:
Promise.all(this.props.companies.map((item) => { return fetch().then().then() })
.then(results => this.setState({ newArray: results, loading: false }))
.catch(error => ... handle error here)
there is a caveat that Promise.all will reject if one of the promises fails. if you dont want that behavior you could use Promise.allSettled instead. allSettled will never reject and it returns instead an array of objects, with status and value keys.