Blockchain code Metaverse VR

Crypto×VR×SmartContract(521)

スポンサーリンク

//tips

//smart contract

これでURL直打ちの対策ができたので早速下記のURLをid2のものに書き換え。

http://localhost:3000/ID/1/edit

Id1のページに戻る予定だったが、画像取得の部分でエラーが出ている。

TypeError: Cannot read property 'userid' of undefined
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"

何が起こっているのかログで確認していく。

Userid2に該当するドキュメントは現時点で一つしかなく、ninja[0].useridも取得できるはず。

console.log('userid')
console.log(ninja[0].userid)

Userid1の方でログ確認したところきちんと取得できている。

再度クリアしてnpm run devを行い、http://localhost:3000/ID/1/editの1の部分を2に変えて実行すると一瞬http://localhost:3000/ID/2/editのページが表示されてすぐに、http://localhost:3000/ID/2/に戻るようになった。

これでurl直打ちを制限する意図した挙動ができた。

Depositのdebank登録フォームの追加やtwitterの登録フォームの追加を行うと同時にdelteアクション時にポップアップで再度delete確認をすることで認証遷移タイミングでの誤タップによる他ユーザーのデータ消失の可能性を下げる。同じくカードのドラッグで順番を入れ替えることができる機能も追加していきたいところ。

まずはdepositのid設定フォームと非表示ボタンを追加する。

Debankidが現在文字列でfirebaseの中にフィールドの一つとして登録されている。また全てのドキュメントに含まれているわけではなく一つのドキュメントに設定されている。

まずはdebankid登録部分を作成。

<Deposits depo={depo}/>
{/* debankid登録ページへ */}
<Box textAlign="center">
<div>
<br/>
<AddCircleOutlineOutlinedIcon
// className={classes.docenter}
sx={{ fontSize: 35 }}
onClick={()=>{setFlagd(!openflagd)}}
/>
</div>

{openflagd && (
<div>
Debank id 登録・更新
<form noValidate autoComplete="off" onSubmit={handleOnDebank}>

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

<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>

</form>
</div>
)}

</Box>

イベントを関数ではクリックしてみて引き継がれたdebankidの内容が表示されるか確認。

pile.debankid = data.debankid ?data.debankid:null

時々useridが読み込めませんなどのようなエラーが出るので、どこかでasyncを挟む必要があるのかもしれない。そこは考えておく。

きちんと下記のような形にしてidまたはnullを取得することができたので、foreachでnullでない場合を取得して変数に格納すれば良さそう。

console.log(ninja[0].debankid)
console.log(ninja[1].debankid)

一旦新規登録分を作成。

async function handleOnDebank(e) {
e.preventDefault();

console.log('handleOnDebank')
console.log(ninja[0].debankid)
console.log(ninja[1].debankid)
const currentdid=null;

const debankid=ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
}
}).then(()=>{
if(currentdid=null){

addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})

}else{

}

}
).then(()=>{router.reload()})

Elseの中にはupdateの処理を記入していく。

}else{

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

updateDoc(updateRef, {
debankid: mydebank
});

にしたが、変更するdocidの方を取得する必要がある

下記のようにしてcurrentdocidを定義して、取得させる。

const currentdid=null;
const currentdocid=null;

ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}

これでいけるか。const handleDelete=async(id)=>{の方もconst docRef=doc(firebaseApp,"mydata",id.toString())になっており、自動生成idの取得はできないかと思うのでこちらも工夫する必要がある。

Cannot reassign to a variable declared with `const`

としてif(currentdid=null){がエラーとなったのでvarに変更。知らぬ間に変数扱いしていた。なぜ変数のように使えていたのかは思い出す必要あり。

下記のように変更を加えた。

async function handleOnDebank(e) {
e.preventDefault();

console.log('handleOnDebank')
console.log(ninja[0].debankid)
console.log(ninja[1].debankid)

var currentdid=null;
var currentdocid=null;

ninja.forEach((element) =>
{
if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}
}).then(()=>{
if(currentdid=null){

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})

}else{

const updateRef = doc(firebaseApp,'mydata',currentdocid);
console.log('currentdocid')
console.log(currentdocid)

updateDoc(updateRef, {
debankid: mydebank
});

}

}
).then(()=>{router.reload()})

まずは現在入れられているdebankidが空になるか確認。thenを咎められたのでここは通常の形に直す。importにupdateDocも追加。

空のままsubmitするとエラーが出たのでabcを入力。きちんとデータベースに登録された。

更新登録は問題なし。

次はdebankidの新規登録確認。今あるdebankidを削除。

Nullのpropertyは扱えませんとエラー。currentdid===nullとすることで無事に取り扱いがされるようになった。

if(currentdid===null){
console.log('aaa')
addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
debankid:mydebank
})

このdeposit欄の表示・非表示を操れるボタンも追加する。

人気の記事

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.