Blockchain code Metaverse VR

SmartContract×VR×Crypto(575)

スポンサーリンク

//tips

今日は小学六年生のスロバキア人ハーフの子とお話しした。
近頃は小三スマホデビューがイケてるらしく、
彼らの遊びは、男性がamongus、
女性がtiktokとのこと(アップロードしないのでプリクラのようなものか)。
時代を感じる。

中学受験なくても塾通いが当たり前らしい。
知識格差がひどいらしい。
とりあえずlayと渋滞という漢字を教えてもらった。強し。

//smart contract

表示の確認。

{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Typography>
{item.username}{item.userid}{item.storagelink}
</Typography>

</div>
))

}

Ninjafinalvがうまく反映されないが、useeffectを通した {ninjafinal}はきちんと反映される。

新たにflagを設定。

const [ninjafinal,setninjafinal]=useState([])
const [ninjafinalv,setninjafinalv]=useState([])
const [ninjafinalflag,setninjafinalflag]=useState(false)

if(mixdone&&ninjax!=[]&&!ninjafinalflag){
console.log('mixdone&&ninjafinal==[]')

console.log('mixlist.filter(x => ninjafinal.includes(x.userid)')
console.log(mixlist.filter(x => ninjafinal.includes(x.userid)))

setninjafinalv(mixlist.filter(x => ninjafinal.includes(x.userid)))
setninjafinalflag(true)

}

これによりついに内容の方を表示させることができるようになった。

<Typography >List</Typography>
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Typography>
{item.username}{item.userid}{item.storagelink}
</Typography>

</div>
))

}

ここからさらに中身を変更しボタン形式に変え、クリックしたらページ[msid]の切り替えをできるようにする。
<div key={index} >
<Typography>
{item.username}
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"/>
</Typography>

</div>

ボタンのonclickメソッドにrouterを設定すれば良いか。

{item.username}
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
onClick={()=>router.push('/ID/'+myid+'/Message/'+item.userid)}
/>

カードの影は<Card sx={{ boxShadow: 0 }}>で消去できた。marginなども別途追加し、きちんとリスト表示を整えることができた。

<Typography >List</Typography>

{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist}>
<Button>
<span className={classes.imagemargin}>{item.username}</span>
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
onClick={()=>router.push('/ID/'+myid+'/Message/'+item.userid)}
/>
</Button>
</Card>

同時に相手からのメッセージには右端揃えでバックグラウンドの色も変更した。

{ninjav.map((item,index) => (
<div key={index} >

{item.userid==authid
?
<Typography className={classes.titlebackshape}>
{item.username}: {item.Message}:{item.date}
</Typography>
:

<Typography className={classes.titlebackshape2} align="right">
{item.username}: {item.Message}:{item.date}
</Typography>
}

</div>
))

送信先の微調整。localstorageからデータを取る。toWhomではなくmsidに依存させた。

{mixlist.map((item,index) => (
<div key={index} >
{item.userid==msid&&(
<Typography>
To: {item.username}
</Typography>
)}
</div>
))
}

良し。カードを押したら遷移するでよかったので下記に修正。Buttonタグは不要だった。

{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid)}>
<span className={classes.imagemargin}>{item.username}</span>
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
/>
</Card>
</div>
))

user1とuser3のchatからuser1とuser2のものに遷移してもトーク箇所のmsidの引用部分が変化していない。

何度かリロードを試すと治るが、そのキャッシュが気になる。

router.push('/ID/'+authid+'/Message/'+item.userid)

これでurlはクリックされたuserに対するurlに適切に変換されている。

ここは普通にリロード処理を追加するのがシンプルか。

<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid).then(() => router.reload())}>

これにてキャッシュ残りのようなものは解決された。router.pushはサーバの中身を上から再読み込みないみたい。

コメント部分UIの改善。

文字を大量に入力したらはみ出した。ここから直す。

人気の記事

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.