Blockchain code Metaverse VR

SmartContract×VR×Crypto(589)

スポンサーリンク

//tips

おおお、政府から新しい資本主義のグランドデザイン及び実行計画(案)が出た。P29の「ブロックチェーン技術を基盤とするNFT(非代替性トークン)の利用等のWeb3.0の推進に向けた環境整備」は期待。

https://www.cas.go.jp/jp/seisaku/atarashii_sihonsyugi/kaigi/dai8/shiryou1.pdf

//smart contract

まずはBoardページを作成、サイドバーのボタンから遷移可能にする。

if(text==='Board'){
router.push("/Board")
}

内容はindexのもののままなので独自の形に変換していく。

まずはBoardコレクションからデータの取得を行う形に変更。

useEffect(() => {
let posts = []
const colRef= collection(firebaseApp, "Board")
getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
const data = doc.data()
const pile={}

pile.mail = data.mail?data.mail:null
pile.text = data.text?data.text:null
pile.title = data.title
pile.userid = data.userid

posts.push(pile)

});

}).then(()=>{
setMaxid(posts.reduce(aryMax))
setNinja(posts)
})

console.log('Ninja')
console.log(ninja)

}
, [ninja])

ログでninjaの出力を確認。きちんと中身は確認できた。

ところが以前行って詰まったように表示のところがうまくできない。メッセージは相互の参照があったのでドキュメントに対して1メッセージにしたが、ボードではできれば複数メッセージを格納したい。その方がシンプルなため。

{ninja.map((item,index) => (
<div key={index} >
<div>
{item.mail}
</div>
</div>
))
}

console.log(typeof());で型判定を行い明確にしていく。

console.log('Ninja')
console.log(ninja)
console.log(typeof(ninja))
console.log(typeof(ninja[0]))

Ninjaは配列にしたつもりだったがobjectでoutputされた。

setNinja(posts)としたからだろうか。

const [ninja,setNinja]=useState([])に変更。

これでもダメ。

console.log(ninja[0])とすると、{mail: 'naki@gmail.com', text: Array(2), title: 'test', userid: 1}が取得できるのだが、ninja[0].mailは対応できない。

Node.jsではオブジェクトのバリューを取れないなどあるのかと、Object.valuesで調べたがこちらもエラーとなる。

Object.values(ninja[0]);が取れないだと。

TypeError: Cannot read properties of undefined (reading 'mail')

わかった。格納されるのが遅かったからだった。ビビった。

if(ninja[0]){
console.log(typeof(ninja[0].mail))
}

こちらで問題なく対応できた。表示タイミングの問題解決。

Rendering箇所を下記にすることで表示させることができた。

{ninja[0]&&
<div>
{ninja[0].mail}
</div>
}

表示したいのはtextに格納された配列の中身なので、下記のようにすればオブジェクトのtextに格納された各userのコメントが確認できる。

{ninja[0]&&
<div>
{ninja[0].text[0].username} : {ninja[0].text[0].chat}
</div>
}

ninja[0]の0がドキュメント/板の順番、text[0]の0がコメントの順番を表す。

まずはtextの方をforeachを使いつつすべて記載していく形になるか。

やることは取得データの整理なのでcomponentsとして分離してしまった方が見やすいかもしれない。

{ninja[0]&&
<div>
<Boardedit item={ninja[0]}/>
{ninja[0].text[0].username} : {ninja[0].text[0].chat}
</div>

別途作成したBoardeditのログで継承内容を確認できた。

export default function Boardedit({item}) {

console.log('Boardedit')
console.log(item)

return (
<div>
abc
</div>
)
}

このままドキュメントが一つの場合つまりninja[0]の中身を展開する場合に限定して進め、後で拡張する。

return (
<div>
{item.map((item,index) => (
<div key={index} >
{item.text[index].username} : {item.text[index].chat}
</div>
))}
</div>
)
}

エラー。Itemは配列ではなくオブジェクトだった。mapは使えない。

探っていると、まさかの外部関数をそのまま実行できることを知った。

var roop = () => {
const a = "あ";
return <div>{ a }</div>
}

これがJSX内で{ roop() }により実行される。今までmapに悩まされていたが、これがあればループ表現も瞬殺なのではないか。素晴らしすぎる。

参考:

人気の記事

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.