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

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

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.