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

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

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.