Blockchain code Metaverse VR

Crypto×VR×SmartContract(556)

スポンサーリンク

//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の基礎的なことも復習する時間を設けないといけなさそう。

【初学者向け】Next.jsのSSR/SG(SSG)/CSRに関する基礎知識

値は全てとれて格納し、ループも改善した。

{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

Next.jsのライフサイクルと外部APIのタイミング

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.