Blockchain code Metaverse VR

Crypto×VR×SmartContract(526)

スポンサーリンク

//tips

//smart contract

リアルタイムの反映を行うためにonSnapshotを導入しようかと考えたが、export default function edit({ ninja })の引数として、getStaticPropsで処理されたものを引き受けているという事情があるので、リアルタイムに反映させるのはgetStaticPropsで再度処理を行なったものを表示させるか、edit自身で処理を行えるかを考える必要がある。

データベースのリアルタイム変化を受けてgetStaticPropsが都度実行されて、editに引き渡されるのなら従来のやり方で良いので、

await getDocs(q)
.then((snapshot)=>{
の内容を変更してみる。

await onSnapshot(q,(snapshot)=>{

これでリアルタイムの変更に対応できるか確認。

新たなエラーが発生。imageの読み込みの際に使用していた"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
が利用できなくなっている。

TypeError: Cannot read property 'userid' of undefined
const gsReference = ref(

Console.logで確認するとninjaへの情報引き渡しがうまくいっていなさそう。

getStaticProps内のconsole.log(posts)を確認。

読み込みタイミングが遅くなるためか。

描画の順番を確認してみると

export default function edit({ ninja }) の中身である

abc

が先に来て、引数を渡す元であるexport const getStaticProps = async (context) => {の中身のログが後にきている。

doc.id 1
doc.id BbCfw7K8mdMepSmoobNJ
doc.id ZGnVMD4Bmxvl7NdwboXO
doc.id notes1

なぜgetStaticPropsを飛び越えてメインのコンポーネントが発動してしまうのか。この制御方法を探す必要がありそう。

その前にSSGについて再確認していたところ、ビルド時1回だけデータフェッチして、ビルドされた後にデータを変更することができないので、SSG はビルド後にデータを変更する必要がないページに使用される。

リアルタイム制御はSSGではできないのでSSRのgetServerSidePropsを使う必要がある。

今回は常にサーバーサイドレンダリングする負荷は今のところかける予定はないので、リアルタイムにカードの入れ替えを行うのは相性が悪いか。

代わりにカードの部分の編集機能と削除・アップロードの簡易化でこの部分は対応する。

それに伴いカード機能は掲示板・メモの用途とmediumなどのblog掲載のものとに分ける必要がある。

Addcontentsのものの下にedit contentsの枠も作り、editボタンを押されたら表示させるようにするか。

const handleflagchange=async()=>{

seteditFlag(!openeditflag)
}

このイベント関数をカード内ののボタンを押すと発動させるようにする。関数の引き渡しだけが少し面倒だが比較的シンプル。

<CardActions>
<Button  onClick={()=>handleOrderchangeright(note.docid)}><ArrowForwardIosOutlinedIcon /></Button>
<Button onClick={()=>handleflagchange()} size="small">edit</Button>
</CardActions>

これでカード内のボタンを押すとテキストボックスが表示されるようにできた。

さらにクリックしたカードの現状の内容をテキストフィールドの中に表示して、そちらをベースに変更処理ができるようにしている。

const handleflagchange=async(id)=>{

seteditFlag(!openeditflag)

ninja.forEach(Item => {
if(Item.docid ===id){
setTitle(Item.title)
setDetails(Item.details)
setScategory(Item.category)
}
}
);

}

<TextField
onChange={(e)=>setTitle(e.target.value)}
variant="outlined"
color="secondary"
defaultValue={title}
fullWidth
required
/>

これで無事にeditボタンを押したカード情報を取得して表示させることができた。

ここから変更を加えてフォームを提出するタイミングでデータベースへのアップロード処理を加えることにする。

それはformのイベント関数であるhandleOnEditcontentsに記述していく。

こちらはhandleOnAddcontentsの内容と同じで問題ないかと思っていたらupdate処理ではなくadd処置になっていたので変更。

Updateのためにはdocidを引き継ぐ必要があったので

var flagdocid=null;
const handleflagchange=async(id)=>{

と先の箇所にdocidを格納する手順を追加。

下記を行い、更新処理を確認。

const updateRef = doc(firebaseApp,'mydata',flagdocid);

人気の記事

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.