Blockchain code Metaverse VR

Crypto×VR×SmartContract(552)

スポンサーリンク

//tips

//smart contract

Indexからの遷移が遅いのは最大userid値の取得部分と読み込みがバッティングしているせいかもしれないと考え、useeffectを導入。こちらの形で様子を見る。

useEffect(() => {
let posts = []
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('Maxid')
console.log(Maxid)

}
, [Maxid])

[]にすると値を取得できないまま終了してしまうので[Maxid]とした。

遷移にはあまり影響しなかったかもしれないがコンソールは綺麗になったのでよしとする。

別途気になったのがNFT画像表示は非同期で行われているのかというところ。

{image &&
<div>
<img src={image} alt="" width="250" height="250" onClick={handleClickNFTImage}/>
</div>
}

データベースから取得できたタイミングで表示という形にした。

Urlにてダイレクトパスを入れた場合と検索からダイレクトパスに飛ぶ場合の体感速度を比較。そこまで大差ないように感じたがダイレクトパスを直接打ち込んだ方が若干早そう。

これはindexで一度データベースにアクセスしてからルートlイングしていることが問題のように思われる。

//authをもとにクリック主のデータベース情報の取得
getDocs(q)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
const data = doc.data()

if(data.userid)
{
console.log(data.userid)
notexist=false
goid=data.userid

}

});

}).then(()=>{
if(notexist){
setError(true)
}else{
router.push('/ID/'+ goid)
}
})

該当データの抽出と遷移は別の形に分けたほうが体感速度としてはいいかもしれない。

他にもadblockを外した場合の遷移を試したがついている場合と大差ない。

route is changedが遷移後にもコンソールに表示されるので調べていく。

const [loading,setLoading]=useState(false)

Router.events.on("routeChangeStart",(url)=>{
console.log('Route is changing..');
setLoading(true)
})
Router.events.on("routeChangeComplete",(url)=>{
console.log('Route is changed');
setLoading(false)
})

{loading&&<Loader />}

探してみると下記のようなrouteChangeComplete の問題点もあるよう。

https://github.com/vercel/next.js/issues/15082

まずはboolで分岐させ余計なstate更新がされないようにすることで問題に対処してみる。

const [finloading,setfinLoading]=useState(false)

Router.events.on("routeChangeComplete",(url)=>{
if(!finloading){
console.log('Route is changed');
//NProgress.done()
setLoading(false)
setfinLoading(true)

}
})

だいぶ許容範囲の遷移スピードに近づいてきたか。

ninja.forEach(Item => {のかぶりを見つけたので統合。

できうる限りでリファクタリングを行なった。

先にデプロイをおこなってみる。

deploy先としてはvercelが良さそう。

https://kontent.ai/blog/comparison-of-jamstack-hosting-platforms-for-next-js/

https://blog.charlesloubao.com/best-platforms-to-deploy-a-nextjs-project/

https://blog.charlesloubao.com/best-platforms-to-deploy-a-nextjs-project/

https://docs.digitalocean.com/tutorials/app-nextjs-deploy/

Vercelにデプロイする方法を模索していく。

https://maku.blog/p/j6ht5fq/

https://tomosta.jp/media/free_lesson/nextjs-basic/

まずはgithubidをvercelに連動させアカウント作成。

Githubに新たなレポジトリーを作成し、そちらをvercelに読み込ませデプロイさせる。

git init
git add .
git commit -m "first commit"

git remote add origin https://github.com/
git push -u origin main

Vercelにそちらを読み込ませbuildingさせたところ、コンパイルエラー。

./pages/ID/[id]/edit.js

Error: React Hook "useRouter" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Error: React Hook "useRef" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Error: React Hook "useState" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Error: React Hook "useStyles" is called in function "edit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks

Warning: Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element

Useが先頭につくものが軒並みエラーの要因になっているよう。どうしたものか原因を究明する。

人気の記事

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.