APIからJSONを取得
componentWillMount(){
console.log("getpod")
const request = axios.create({
baseURL: "http://127.0.0.1:8080",
method: "GET"
})
request.get("/getpods")
.then(request => {
// console.log(request.data)
this.setState({
pods: request.data.items
})
console.log(this.state.pods)
})
}
JSONの要素を取り出す
<div>
<ul>
{this.state.pods.map((pod) => {
return <li>{pod.metadata.name} {pod.status.phase}</li>;
})}
</ul>
</div>
取得されたJSONデータ
注意ポイント
-
reqest.data
とすると、一番はじめの要素がルートというか頭の部分になるのだけど、renderするときにpod.items.metadata.name
みたいなことをやってもエラーになった -
request.data.items
とすると、一番はじめの要素がmap形式になるようで、renderするときにその次の要素から指定すればエラーはでなかった - つまるところ、stateにいれる値はmap型の階層まで定義してあげて、その部分から下の要素を普通に指定してあげればいいみたい
- そのため、取得したJSONデータの中に複数の層にまたがって必要なデータがある場合、stateを複数定義してあげてmap形式の階層で定義してあげればよいみたい
- いまいちなんでかはわからない