//tip
//smart contract
getDownloadUrl().addOnSuccessListenerを使用してみる。
https://stackoverflow.com/questions/37374868/how-to-get-url-from-firebase-storage-getdownloadurl
getDownloadURL(gsReference).addOnSuccessListener{ task =>
if (task.isSuccessful) {
urllist.push(getDownloadURL(gsReference))
}
これはエラーとなり使えなさそう。
https://jsmobiledev.com/article/storage-file-exist/
let urllist = []
if(Maxid!=''){
const firestorage = getStorage();
for (let i = 1; i < Maxid+1; i++) {
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+i+"/image.jpg"
)
// if(getDownloadURL(gsReference)){
// urllist.push(getDownloadURL(gsReference))
// }
getDownloadURL(gsReference).then(url => {
//return Promise.resolve(true);
urllist.push(url)
})
.catch(error => {
if (error.code === 'storage/object-not-found') {
return Promise.resolve(false);
} else {
return Promise.reject(error);
}
});
}
console.log(urllist)
}
こちらでエラーは解消することはできた。
{maparray &&
maparray.map((item,index) => (
<div key={index}>
<Grid item xs={12} md={6} lg={4} key={index}>
<img src={item} alt="" width="100" height="100" />
</Grid>
</div>
))
画像の表示はできるようになったが描画のタイミングの問題で、マウント後にサーバー側で更新したらやっと反映される。
Useefectでmaparrayの変化が認識されず、永遠に読み込み続けられてしまう問題が発生。
後で組み替えるがMaxidの変化の場合に際レンダリングする形にし、thenで逐次進行する形にした。
useEffect(() => {
let posts = []
let urllist = []
var MAX=0
const colRef= collection(firebaseApp, "mydata")
getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().userid))
});
}).then(()=>{
setMaxid(posts.reduce(aryMax))
console.log('Max')
console.log(posts.reduce(aryMax))
MAX=posts.reduce(aryMax)
}).then(()=>{
console.log('Maxid')
console.log(MAX)
if(MAX!=0||MAX!=undefined||MAX!=null){
console.log('abc')
console.log(MAX)
const firestorage = getStorage();
for (let i = 1; i < MAX+1; i++) {
console.log('abcd')
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+i+"/image.jpg"
)
console.log('abcd')
getDownloadURL(gsReference).then(url => {
//return Promise.resolve(true);
urllist.push(url)
console.log(i)
console.log(MAX)
})
.catch(error => {
if (error.code === 'storage/object-not-found') {
return Promise.resolve(false);
} else {
return Promise.reject(error);
}
});
}
// if(!arrayflag&&maparray!=''){
// setmaparray(urllist)
// setarrayflag(true)
// console.log('console.log(maparray)')
// console.log(maparray)
// }
console.log('console.log(maparray)')
}
}).then(()=>{
setmaparray(urllist)
console.log('final')
console.log(maparray)
})
}
, [Maxid])
urlが中身の変数自体はmaparrayに格納されているので変数の問題ではなさそう。
Firestorageからのgetで問題が起きていることでシンプルに描画ができなくなっているのだろうか。
Firestorageに全てのid分のフォルダを作成し、image.jpgを格納。
こちらで取り出し反応を見る。
{maparray &&のタイミングが悪いのかもしれない。useeffectで更新があるたびに変化するMAXidをベースにするか。
Mapparrayの格納タイミングが遅すぎるためこちらでもエラー。
エラーの要因はサーバーからmaparrayの最新値を渡すよりも早くクライアント側の反映が完了しており、その後もクライアント側で変更を受け取る手段がないこと。
SGを使用しているのでuseeffectでの更新がベスト。やはりmaparrayを第二引数に指定した場合のuseeffect内で生じる謎のループ現象を解決しかない。
Next.jsの基礎的なことも復習する時間を設けないといけなさそう。
値は全てとれて格納し、ループも改善した。
{maparray &&
maparray.map((item,index) => (
<div key={index}>
<Grid item xs={12} md={6} lg={4} key={index}>
<img src={item} alt="" width="100" height="100" />
</Grid>
</div>
))
ページに画像が表示されず、imgタグ内のwidthなどを変更すると描画される。
{maparray!=[] &&
調べ物をしているときに表示されないページのコンソールに突如エラーメッセージが表示されLISTEN channnel…rpcとあったので実際に接続して表示させようとはしていたよう。
一度に表示する画像数に限界があったのだろうか。
試しにstorageのURLを直接入力したimageを並べると普通に表示された。明らかにstorageからのurlの取得が問題になっているので、Staticpropsで前処理しなければいけない案件かもしれない。
https://zenn.dev/ttani/articles/nextjs_basic_learning
