Blockchain code Metaverse VR

Crypto×VR×SmartContract(475)

スポンサーリンク

//tips

//smart contract

apiの基本的な形を調べてる。

const getFakePerson=async()=>{
const res = await fetch(`https://api.aoikujira.com/time/get.php`)
const {results} = await res.json()
console.log(results)
}

このasync関数はgetFakePerson()として呼び出せる。{results}とはresのjsonオブジェクトにあるresultsプロパティのこと。

export async function getServerSideProps()のコンポーネントの使い方がまずいのではないか。

コンポーネントの役割について復習。

関数コンポーネントは下記のようにかける。

Function foo(引数){
return …jsx表示…
}

一般的な利用方法は<コンポーネント名 />をjsxの中のタグとして記載すること。これによりタグの中に関数でreturnしたエレメントがはめ込まれる。

先のexport default Pageにはfunction Page({ data }) {の情報は入っているが、export async function getServerSideProps() {の情報は入っおらず、これはfunction Page()の中に反映しなければいけなさそう。

import React,{useState} from 'react'

function Page() {//Page({ data })
// Render data...

//var data=data
// <getServerSideProps />
const [msg]=useState('hi')

return(

<getServerSideProps message={msg} />
)
}

// This gets called on every request
export async function getServerSideProps(props) {
// Fetch data from external API
try{
const res = await fetch(`https://api.aoikujira.com/time/get.php`)
const data = await res.json()
const ob=JSON.parse(data)
console.log(ob)
props.msg=ob

// Pass data to the page via props
return(
<p>{ props.msg}</p>
) //{ props: { data } }

}catch(err){
console.error(err)
}
}

export default Page

に変更したがうまく表示されない。

asyncにすると連携の仕方が変わるのだろうか。

If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

export async function getServerSideProps(props)の使い方が少し特殊なのかもしれない。

また、一般的な getServerSideProps は、レンダリングに必要な props を返却することが主な用途とのこと。

class Index extends Component {
state = {}

render() {
console.log(this.props)
return (
<div>
<h1>Our Index Page!!</h1>
</div>
);
}
}

export const getStaticProps = async () => {
console.log('fetching data')
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
const posts = await res.json()
return {
props: {
posts,
},
}
}

ここで下記のような属性であるpropsの中にdataが埋め込まれることはわかったが、最終的な反映先はどのように判別するのか。

return {
props: data
}

visual studioのサーチ機能を使用すれば、command+fをしなくてもすぐに探せる。

本日教えてもらった中で、next.jsのpagesフォルダは各jsファイルでルートを保有しており、一つのファイルで一つのコンポーネントがベストとのこと。

export async function getServerSideProps(props) {

return {
props: {
test: 1
}
}

}

として、console.log(props)をindex.jsのexport default function Home(props) {の中に入れるとコンソールの中で確認することができた。

export default function Home(props) {のreturn (の中で {props.test}を記述することで解決できた。

ここからapiの内容を反映できるようにする必要がある。

気合いでなんとかした。力尽きた。

import {useState} from 'react'

export default function Home({ data }) {

const heroPost = data.status
console.log(data)
console.log(data.results)
const obj=Object.values(data.results[0])

return (
<>
<p>{data.results[0].address1}</p>

<p>{obj}</p>
</>

);

}

export async function getServerSideProps() {
//郵便api http://zipcloud.ibsnet.co.jp/doc/api
const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'

const res = await fetch(url)
const data = await res.json()

// Pass data to the page via props
return { props: { data } }

}

参考:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values

javascript mapを使って連想配列から必要なキーのみを取得する

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.