In Nextjs I call an imported function 'GetURL(props)' passing the Files array previously uploaded to firebase cloud storage.
export default function ImageUploaderComp(props){
const \[RszdCloudImg, setRszdCloudImg\] = useState(\[\]) *// Array to receive the rezised cloud urls*
useEffect(()=\>{
console.log('RszdCloudImg:',RszdCloudImg)
},\[RszdCloudImg\])
const handleSubmit=(){
GetURL({path:path,Files:Files,setRszdCloudImg: setRszdCloudImg})
}
return(
{RszdCloudImg.length\>0 && RszdCloudImg.map((URL)=\>{return(<img/>)})}
)
}
// IMPORTED FUNCTION //
async function GetURL(props){
const storage = getStorage(Firebase);
let tempArray:Array\<string\> = \[\]
props.Files.map(async (file)=\>{await getDownloadURL(ref(storage,props.path + file.rszd_name))
.then((url)=\>{if(!tempArray.includes(url)){tempArray.push(url)}})
.catch((err)=\>{console.log(err)})
})
props.setRszdCloudImg(tempArray)
}
This code is the most simple version of my code. Everything works as expected and when RszdCloudImg is consoled in useEffect it shows next: RszdCloudImg: > []
With an empty array but if I click it it displays what I need, why is this happening? and how can i fix it?
if I comment and uncomment anything in my code it refresh by itself and displays as expected.
Hope someone can Guide me! before refresh my code commenting anything Thanks before refresh my code commenting anything
It update the displayed images alone.
I have tryed multiple tymes with times out, intervals, attempts, and basically I don't need change anythig just that it updates alone. Sometimes it makes it by itself another times I need to refresh. I understand that this behaviour could be avoided with the UseEffect hook but it's not working as expected.
Do I have to run in any other way another useEffect to refresh? or could happend because the GetURL is into an external functional component?