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

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

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2022 All Rights Reserved Powered by AFFINGER5.