//tips
//smart contract
配列postsがreturnされるオブジェクトの要素の一つとなっているのでそちらの取り出しを考える。
[
title: 'Complete my ninja training',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
userid: 2,
username: 'naki'
]
return {
props: { ninja: posts }
}
配列の中の連想配列の一種だとすると変数名[配列番号].keyで取得できるはず。
console.log(entry[0])までは
[
title: 'Complete my ninja training',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
userid: 2,
username: 'naki'
]
このようにとれたがこの先が取れない。
Cannot read property 'title' of undefinedのエラーが発生。
console.log(entry[0][0])
Cannot read property 'node' of undefined
そもそもの格納方法をオブジェクトの形にして{ninja}に渡す。
getStaticPropsのpostsのオブジェクトで生成。
let posts = {}
これにより無事にfirebaseのuserデータを抽出してページに表示することができた。
Useridでの検索ができていなかったので下記の解決も行う。
//const q = await query(colRef,where("userid","==",id))
const q = await query(colRef,where("username","==","naki"))
stringとの型の違いで弾かれている可能性があるのでidを数字に変換してみる。
const id = parseInt(context.params.id)
とすることで無事に[id]のページのidから該当者の情報を引き出すことができた。
下記で該当userの複数のドキュメントを抽出できているかを確認する。データベースに情報を付加し、console.log('data.title’)などの反応を確認。
await getDocs(q)
.then((snapshot)=>{
console.log('1')
//console.log(snapshot)
console.log(snapshot.docs)
snapshot.docs.forEach(doc => {
console.log('2')
const data = doc.data()
console.log('data.title')
console.log(data)
console.log(data.title)
posts.title = data.title
posts.details = data.details
posts.userid = data.userid
posts.username = data.username
});
}).then(()=>console.log(posts))
きちんと内容は確認できたのでpostsへの書き込みを上書きされないように都度pushという形で対応する。
const pile={}
pile.title = data.title
pile.details = data.details
pile.userid = data.userid
pile.username = data.username
posts.push(pile)
複数のオブジェクトを扱う場合にはpushが一番良い方法のよう。
Postsを配列に直さざるを得ないか。
一旦配列に直して反応を見る。
Error serializing `.ninja[1].title` returned from `getStaticProps` in "/ID/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
データベースの内容と抽出項目が合致しない場合の処理を行う必要があるよう。ここではデータベースで合致させるようにした。入力必須などにすれば問題ない。
これでpostsは配列となり、下記のようになる。
{
ninja: [
{ title: 'hi', details: 'yoisho', userid: 1, username: 'po' },
{
title: 'Yoisho birthday bash',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
userid: 1,
username: 'naki'
}
]
}
今回はオブジェクトに格納したものを配列に入れたので<h1>{ ninja[0].title }</h1>のように取り出すことが可能になった。
また格納された複数のオブジェクトも下記のようにして取り出せるようにした。
return (
<div>
{ ninja.map((item,index) => {
return (
<div key={index}>
<p> { item.title }</p>
<p>{ item.details } </p>
<p> { item.userid }</p>
<p>{ item.username } </p>
</div>
);
})}
やっとここまで辿り着けた。トライアンドエラーでのゴリ押しになっているので、少しずつ全体像の理解を深めていく。
また、文字情報に加えてimageの参照先も格納しておくことで、imageの表示もユーザーごとに操作できるようにする。
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/image.jpg"
)
上記のgs://myapp-8e583.appspot.com/image.jpgの箇所を
gs://myapp-8e583.appspot.com/[idフォルダを作成]/image.jpg"
のような形に切り替えることを検討する。
まずは"gs://myapp-8e583.appspot.com/test/image.jpg”にアクセスできるかを確認。一部修正した上で問題なく表示された。
//const firestorage = getStorage(firebase);
const firestorage = getStorage();
このtestの箇所に各idを入れる方法を考えていく。
Firebaseのstorageにフォルダ1,2を作成。この作成をurlから行う方法はeditに導入するのでまた後で試行。
ここでは作成されたフォルダ内のimageを取り出せるようにする。
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
ninja[0]なのは取り出すオブジェクトのuseridは全て同じなので。
こちら無事に反映できた。
サイズが大きすぎるので調整。
<img src={image} alt="" width="300" height="300"/>
ばっちり。
