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

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

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.