Blockchain code Metaverse VR

Crypto×VR×SmartContract(533)

スポンサーリンク

//tips

//smart contract

データベースへのarray型データの追加は確認できた。

今度はarray型のデータを読み取り活用する方に移る。

これができれば、arrayに格納したfollower一覧を表示することも可能になる。

pile.followers = data.followers ?data.followers:null

まずはデータベースの中からfollowersデータの抜き出しを行えるようgetStaticPropsに設定。

引き受けデータの中からfollwersのデータをログで抽出してみる。

if(Item.followers !=null||Item.followers !=undefined){

console.log(Item.followers)
console.log(Item.followers.length)

きちんとarrayで抽出できた。

For authでのauth登録時にuseridなどの登録も一緒にデータベースに格納する形にする。

現在のuseridなどはデータベースに直接て入力している内容になっていることを忘れない。この設定は[id].jsにて行う。

pile.following = data.following ?data.following:nullも一緒に作成して、各々のSNSマークの下に総数を表示させる。

const [followers,setfollowers]=useState('')
const [following,setfollowing]=useState('')

if(Item.followers !=null||Item.followers !=undefined){

if(followers==undefined||followers==null||followers==''){
setfollowers(Item.followers)
}

}

if(Item.following !=null||Item.following !=undefined){

if(following==undefined||following==null||following==''){
setfollowing(Item.following)
}
}

一旦これらで挙動を確認の上数字を表維持させる。setfollowing(Item.following)で空が引き渡されるときに空ループが延々に続くのかも確認。

followers:{()=>{followers?followers.length:"0"}} following:{()=>{following?following.length:"0"}}

関数の実行でないので()=>は不要で、

followers:{followers?followers.length:"0"} following:{following?following.length:"0"}

できちんと反映を確認できた。

Followボタンを作る必要があるがその前に、followersボタンをクリックすると中身のusernameを取り出せることを確認する。

<p onClick={() => console.log('hi')}>followers:{followers?followers.length:"0"}</p>

Pなどとすると改行されてしまうのでspanで対応することにした。

<span onClick={() => console.log('hi')}>followers:{followers?followers.length:"0"}</span> <span>following:{following?following.length:"0"}</span>

こちらにてonClick={() => console.log('hi’)}動作は無事に確認できている。

onClick={handleOnArraytest}

async function handleOnArraytest(e) {

console.log('handleOnArraytest')

}

きちんと格納されたarrayの内容を抽出することができた。

async function handleOnArraytest(e) {

console.log('handleOnArraytest')

if(followers){
followers.forEach(Item=> console.log(Item))
}
}

この取り出した内容の表示場所・表示形態などは考える必要がある。

Windowにポップアップさせるか、右サイドバーをスライドで持ってくるか、と考えていたが、別ページを作成し、そのままpropsにarray情報まで入れなくても、クリックされたページの[id]情報をそのページに渡せば良いか、followers一覧とfollowing一覧をすんなり表示できる。

Twitterのもどうなっているか確認したら同様の構造になっていた、ただ、followers一覧とfollowing一覧は別のurlにしている。followers一覧でミュート・ブロックなどの設定も行えるようにしているからか。そうすると、ここでは認証済みのページで編集する必要がありそう。

認証されていないページでは、それらの機能は表示されないようにすることになる。

これは参考になる。following一覧を表示するページを作るか。

人気の記事

1

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

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.