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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.