Blockchain code Metaverse VR

Crypto×VR×SmartContract(503)

スポンサーリンク

//tips

//smart contract

Edit.jsの下部のcardコンポーネントの下にも+ボタンを挿入できた。

これは単にBox箇所を挿入するだけで問題なく反映された。

<Box textAlign="center">
<div>
<br/>
<AddCircleOutlineOutlinedIcon
// className={classes.docenter}
sx={{ fontSize: 35 }}
onClick={handleClickcreate}
/>
</div>
</Box>

 

Debankの数字をdrawerbar内に反映できないか試していく。listの内容が現在固定されているので、その一部を変数で入れ替えられるようにする。

<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>

Layout.jsを編集していく。

新たに下記を作成。

const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])

{myarray.map((text, index) => (としてシンプルに表示。

myarrayの中身をdebankの受け取りに合わせて変更しようかと考えたが、layoutの中が煩雑になりそうなのでこちらも別のコンポーネントので対応する。

const Editdrawer = () => {
const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])

return (
<div>
<List>
{/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( */}
{myarray.map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>

);
}

export default Editdrawer;

これをindexでボタンが押されたタイミングで数値を追加されるようにする。現状はボタンが押されると handleOnDebankSubmit(e)が発動して、const [mydebank, setDebank] = useState();中に保存され、mydebankの変数として表示されている。

async function handleOnDebankSubmit(e) {
e.preventDefault();

const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});

var results = await res.json();
console.log(results.total_usd_value);

setDebank(results.total_usd_value);
}

Drawerにもdebankのボタンを追加して変数の値を表示させる。

import React from "react";

import { Button, Container, Typography } from "@mui/material"
import HailIcon from '@mui/icons-material/Hail'
import { makeStyles } from "@mui/styles"

import { useState } from "react"

import { Drawer } from "@mui/material"

import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';

import List from '@mui/material/List';
import { typography } from "@mui/system";

const Editdrawer = () => {
const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
const [mydebank, setDebank] = useState();

async function handleOnDebankSubmit(e) {
e.preventDefault();

const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});

var results = await res.json();
console.log(results.total_usd_value);

setDebank(results.total_usd_value);
}

return (
<div>
<List>
{/* {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( */}
{myarray.map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>

<form onSubmit={handleOnDebankSubmit}>
<h2>Debank</h2>
<button>Debank get</button>
<h6>{mydebank}</h6>
</form>

</div>

);
}

export default Editdrawer;

この表示させた値をarrayの中に組み込む。

Mydebankのarray追加がうまくいっていなかったので、別途arrayを作って挙動確認。

async function handleOnDebankSubmit(e) {
e.preventDefault();

const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});

var results = await res.json();
//console.log(results.total_usd_value);

setDebank(results.total_usd_value);
myarray.push(mydebank);
console.log(mydebank);
console.log('hi,there');

}

const handleOnArraychange = (e) => {
e.preventDefault()

console.log(myarray);
var newarray=myarray.pop();
//setArray(newarray);
console.log(newarray);
console.log('hihi');
console.log(myarray);
setArray(myarray);

}

きちんmyarrayを更新することができた。ただ、ここではリアルタイム表示の変換はできないし、するつもりもないので、挙動確認できたことで問題ない。

console.log(mydebank);がundifinedになるのはJSON.parseしてないからかと思ったのだが違ったよう。

色々試してやっと配列に入れられたのだが、setDebank(results.total_usd_value);とするとセットできないよう。別の変数に移して読み込ませることできちんと認識された。

console.log(results.total_usd_value);
const myvalue= results.total_usd_value

setDebank(results.total_usd_value);
myarray.push(mydebank);
myarray.push('みかん');
myarray.push(1.1233333333333333333333333333333333333333333333333333333333333);

const foo="abc"
myarray.push(foo);
myarray.push(myvalue);

console.log(myarray);
console.log('hi,there');

0: "Inbox"
1: "Starred"
2: "Send email"
3: "Drafts"
4: undefined
5: "みかん"
6: 1.1233333333333333
7: "abc"
8: 2046.520064564697

参照値などが関係しているところかと思ったが、setStateで値が更新されるのは関数が呼び出された後だからか。

const myvalue= results.total_usd_value

setDebank(myvalue);
myarray.push(myvalue);

console.log(myarray);
console.log(mydebank);

このように変更したがconsole.log(mydebank);はやはりundifined。この後に値が更新されるのか解せぬ。return内の<h6>{mydebank}</h6>にはきちんと反映されている。

Arrayへの追加は確認できたので、今度はボタンではなく、useeffectでページ読み込み時に追加させる。

useEffect(() => {
DebankSubmit()

},[])

async function DebankSubmit() {ではタイミング遅く反映に間に合わないので、ここはgetstaticpropsを使う必要がありそう。

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

しかし、コンポーネント単位では使えないのか。なぜかページに反映されない。

https://kokeshing.com/article/use-getstaticprops-component/

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

思い出した。getStaticPropsはページからのみしかエクスポートされなかった。

そうか、drawerにprerenderingを使ってfetchしたものを入れるのはあまり良くなさそう。

メインページの方にdepositなどとして表示させる形に変更する。

Deposits.jsページを作成。edit.jsページに取り込み。

import Deposits from './Deposits';

更新日時を表すのにnpm install date-fnsが良いそうなので利用。

const fns = require('date-fns')
//console.log(fns.format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSS"))
const today=fns.format(new Date(), "yyyy-MM-dd")

このように対応。

そこから先のようにfetchしたものをprerenderingする形に変更。

import * as React from 'react';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import { parseISO, format } from 'date-fns'
import { useState,useEffect } from "react"

export default function Deposits({myvalue}) {

const [mydebank, setDebank] = useState(myvalue);
//setDebank(myvalue);
console.log('1');

const fns = require('date-fns')
//console.log(fns.format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSS"))
const today=fns.format(new Date(), "yyyy-MM-dd")

return (
<Paper>
<h1>Recent Deposits</h1>
<Typography component="p" variant="h4">
{mydebank}
</Typography>
<Typography color="text.secondary" sx={{ flex: 1 }}>
{today}
</Typography>
</Paper>
);
}

export async function getStaticProps() {
//export async function getServerSideProps() {

console.log('2');

const res = await fetch('https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
headers: {
'accept': 'application/json'
}
});

var results = await res.json();
const myvalue= results.total_usd_value

console.log('hi,there');
console.log(myvalue);

return {
props: {
myvalue,
},
}
}

Editページをみるとシンプルに下記で対応できている。こちらで試す。

useEffect(() => {
fetch('http://localhost:8000/notes')
.then(res => res.json())
.then(data => setNotes(data))
}, [])

他にも下記が保留中。

Mediumで取得した情報をそのままcardデータベースに反映できないか。

Twitter追加ボタンの作成。

人気の記事

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.