//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)の確認。
きちんと２でカウントされている。
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重ループまでなら作れたが、ドキュメントごとに分割できていない。もう少しなんだがどうするか。
