setState doesn t work in a promise. State undefined with React - reactjs

Question

The problem is that I retrieve links from photos stored in firebase storage, I retrieve the links in an array (arrayurl) and everything works fine (console.log (arrayurl) shows me the link fix well) until I update the status with this.setstate ({array: arrayurl}). There is already the crash since it tells me that array is undefined. I know it's a sync problem but I can't get the array state to change in the promise. Try to move the setstate from place but always the same ...thanks for your help!
recupurl() {
var arrayurl = []
var storageRef = firebase.storage();
var listRef = storageRef.ref('images');
listRef.listAll().then((res) => {
res.items.forEach((itemRef) => {
var listRef2 = storageRef.ref('images').child(itemRef.name)
listRef2.getDownloadURL().then((url) => {
arrayurl.push(url);
console.log(arrayurl);
this.setState({
array: arrayurl
})
});
})
})
}

Answer 1

This happens when this does not mention class.
To solve this problem, I define a variable outside the block and pour this into it and use it inside my own block.
for example :
let T = this
let urls =[]
let storageRef = firebase.storage();
let listRef = storageRef.ref('images');
listRef.listAll().then( res => {
res.items.forEach( itemRef => {
let _listRef = storageRef.ref('images').child(itemRef.name)
_listRef.getDownloadURL().then( url => {
urls.push(url);
console.log(urls);
T.setState({array:arrayurl})
});
})})}

Answer 2

You're mutating the state because of using the same array. The state should be updated in an immutable way. You also seem to have a problem with accessing setState because of this keyword referring to something other than the class, you can use an arrow function for that.
If you only want to update the state when the array is fully fetched instead of for each iteration, you can use this:
recupurl = () => {
const arrayurl = []
const storageRef = firebase.storage();
const listRef = storageRef.ref('images');
listRef.listAll().then((res) => {
res.items.forEach((itemRef) => {
const listRef2 = storageRef.ref('images').child(itemRef.name)
arrayurl.push(listRef2.getDownloadURL())
});
Promise.all(arrayurl).then(urlArr => {
this.setState({array: urlArr })
}).catch(error => {
console.log(error)
})
})
}