Blockchain code Metaverse VR

SmartContract×VR×Crypto(590)

スポンサーリンク

//tips

//smart contract

Boardページ構築続行。componentsに分離したBoardedit({item}) {の中身を記述していく。

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

引数にオブジェクトであるninja[0]をとっており、この中身は{mail: 'naki@gmail.com', text: Array(2), title: 'test', userid: 1}である。

Textはメッセージの中身でarrayに格納されている。

text: Array(2)
0: {username: 'naki', chat: 'hi'}
1: {username: 'nak', chat: ‘great’}

これをベースにの形に抜き出す外部関数を作成していく。

{ninja[0].text[0].username} : {ninja[0].text[0].chat}

下記の形でtext内の配列を抜き出すことにした。ログでelement内部がきちんと取れているので、表示タイミングまたはreturnの方法が何かおかしい

var roop = () => {
item.text.forEach(element => {
console.log("element")
console.log(element)
console.log(element.username)
return <div>{element.username} : {element.chat}</div>
});
}

検証のため下記を実行。すべてoutputできた配列に格納し、アウトプットする形で認識させる必要があったよう。

var rop = () => {
return <div>{ item.text[0].username }</div>
}

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

var rap = () => {
const items = [];
for (let i = 0; i <item.text.length; i++) {
items.push(<div>{ item.text[i].chat }</div>)
}
return <div>{ items }</div>;
};

ドキュメントが一つの場合の対応は下記のようにした。

import Image from 'next/image'

export default function Boardedit({item}) {

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

var rap = () => {
const items = [];
for (let i = 0; i <item.text.length; i++) {
items.push(<div>{ item.text[i].username }:{ item.text[i].chat }</div>)
}
return <div>{ items }</div>;
};

return (
<div>
{ rap() }
</div>
)
}

Boardに二つ目のドキュメントを追加して、複雑な処理にも対応できるか確認する。

そもそものninjaへの格納は const colRef= collection(firebaseApp, "Board”)から取得されたドキュメントすべてなので、全てのドキュメントを展開して取得する必要がある。

同様な階層を持つドキュメントを作成。

この二つがninjaに格納されていることを確認。warningが出ているがログは問題ない

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Boardedit`. See https://reactjs.org/link/warning-keys for more information.

https://reactjs.org/docs/lists-and-keys.html#keys

一通りkeyをつけたがwarningは消えない。これは機能に影響ないので後で解決方法を探る。

<Boardedit item={ninja}/>を渡せる形にBoardedit({item})をカスタマイズしていく。

var rap = () => {
const items = [];
for (let i = 0; i <item.length; i++) {
for (let s = 0; s <item[i].length; s++) {
items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
}
}
return <div >{ items }</div>;
};

これで表示されなかったので修正。text.lengthになっていなかった。こうするとメッセージは表示されるようになったが、testドキュメントの方が取得されていないで表示されている。

var rap = () => {

for (let i = 0; i <item.length; i++) {
console.log('item[i]')
console.log(item[i])

const items = [];

for (let s = 0; s <item[i].text.length; s++) {
console.log('item[i].text[s]')
console.log(item[i].text[s])

items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
}
return <div >{ items }</div>;
}

};

console.log(item.length)の確認。

きちんと2でカウントされている。

return <div >{ items }</div>;の場所が悪いのか。

きちんと全部のコメント文を表示させることができた。

ただ、ドキュメントブロックごとにコメントを分けたいのである。

var rap = () => {

const items = [];
const blocks = [];

for (let i = 0; i <item.length; i++) {
console.log('item[i]')
console.log(item[i])
console.log(item.length)

for (let s = 0; s <item[i].text.length; s++) {
console.log('item[i].text[s]')
console.log(item[i].text[s])

items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
}
blocks.push(items)
items = []
console.log("items")
console.log(items)
console.log(blocks)

}
return <div >{ blocks }</div>;

};

こちらでブロック単位に格納させることに成功。

あとはブロックごとの表示の塊を作れれば良い。

return <div >{ blocks }</div>;

Mapにて下記のような形を作ったがエラー。

return(
{blocks.map((item,index) => (
<div key={index} >
)}
</div>
)

error: Unexpected token `.`. Expected ... , *, (, [, :, , ?, = or an identifier
35 | {blocks.map((item,index) => (

もしや外部関数にrenderingの方でmapを連結できるのではないかと画策したが無理だった。

return (
<div >
{ rap().map((item,index)=>(
<div key={index} >
{item[index].props.children[0]}{item[index].props.children[1]}{item[index].props.children[2]}
</div>
) )}
</div>
)

他のfunctionを差し込んで対処することにする。

vroop(blocks)で実行してみたが、blocks[i].props.children[]が取得できない。

function vroop(blocks) {

console.log("blocks")
console.log(blocks)
console.log(blocks[0])

Blocks[0]の構造は下記のようになっており、propsの中にオブジェクトとしてメッセージの中身が格納されている。

0:
$$typeof: Symbol(react.element)
key: null
props: {children: Array(3)}
ref: null
type: "div"
_owner: FiberNode {tag: 0, key: null, stateNode: null, elementType: ƒ, type: ƒ, …}
_store: {validated: false}
_self: undefined
_source: {fileName: '/Users/akihironakamura/muidemo/components/Boardedit.js', lineNumber: 25, columnNumber: 24}
[[Prototype]]: Object

遡っていくとitems.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)の箇所から既にこの構造になっている。

タグごと渡す際の宿命のようなものか。タグは最後にrenderingの方に渡すところに止めよう。

items.push(item[i].text[s].username+":"+item[i].text[s].chat)

そのままitemsにpush。

これでBlocksがかなりシンプルになった。

0: (2) ['naki:ららら', 'nak:あああ']
1: (2) ['naki:hi', 'nak:great']

vroop(blocks)で再度ブロックごとに分ける際に全てを展開することになるので、先にやった関数の中で既に完結できるようになっているかもしれないと気づく。

items.push([i,item[i].text[s].username+":"+item[i].text[s].chat])

return (
<div >
{blocks.map((item,index) => (
item.map((i,index)=>(
<div key={index} >
<Card>
{i}
</Card>
</div>
))
))}
</div>
)

2重ループまでなら作れたが、ドキュメントごとに分割できていない。もう少しなんだがどうするか。

人気の記事

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.