//tips
おおお、政府から新しい資本主義のグランドデザイン及び実行計画（案）が出た。P29の「ブロックチェーン技術を基盤とするＮＦＴ（非代替性トークン）の利用等の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の出力を確認。きちんと中身は確認できた。
ところが以前行って詰まったように表示のところがうまくできない。メッセージは相互の参照があったのでドキュメントに対して１メッセージにしたが、ボードではできれば複数メッセージを格納したい。その方がシンプルなため。
{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に悩まされていたが、これがあればループ表現も瞬殺なのではないか。素晴らしすぎる。
参考：
