react axiosで取得したjsonデータの配列をviewに表示したい
やりたいこと
reactでbuttonのコンポーネントを作成し、ボタンクリックにより rails apiを呼び出し、
返却されたjsonの配列をviewに表示したい。
つまっていること
ボタンクリックでcallUsersAPIというのは呼び出されて
console.log(res)で取得結果を確認すると期待するデータが取れていることはわかりました。
しかしcallUsersAPI内で取得したjsonのデータをループでlistに入れる処理をしていますが
View側で何も表示されません。
参考サイト
以下ソースコード
#UsersApi.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
//コンポーネント関数
function UsersApi() {
const url = `http://localhost:3001/api/v1/sample/getUsersList`;
const [response, setResponse] = useState(null);
const [loding, setLoading] = useState(false);
const [error, setError] = useState(false);
const [init, setInit] = useState(true);
const list = [];
function callUsersAPI() {
setLoading(true)
setError(false)
axios.get(url)
.then(res => {
console.log(res);
setResponse(res);
for(var i in res.data){
list.push(<li>{res.data[i].name}</li>);
}
})
.catch(() => {
setError(true)
})
.finally(() => {
setLoading(false)
setInit(false)
});
};
useEffect(callUsersAPI, []);
return (
<div>
<button onClick={() => callUsersAPI()}>
getUsersList
</button>
{
error ? (
<p style={{color: "red"}} >
データを取得できませんでした。
</p>
)
:loding ? (
<p style={{color: "green"}}>
loading...
</p>
)
:init ? (
<p style={{color: "green"}}>
apiデータ取得前
</p>
)
:(
<div>
<ul>
{list}
</ul>
</div>
)
}
</div>
);
}
export default UsersApi;
#Sample.js
import React,{ useState, useEffect } from 'react';
import UsersApi from './UsersApi'
import axios from 'axios';
//コンポーネント関数
function Sample() {
const [sample, setSamples] = useState([]);
const [ loading, setLoading] = useState(false)
const [ error, setError] = useState(false)
//初期化ロード
const init = () => {
setLoading(true)
setError(false)
axios.get(`http://localhost:3001/api/v1/sample`)
.then((res) => {
console.log(res)
const sampleData = res.data
setSamples(sampleData)
setLoading(false)
})
.catch(() => {
setError(true)
})
.finally(() => {
setLoading(false)
})
};
useEffect(init, []);
return (
<div className="Sample">
<p>Hello World!</p>
{
error ? (
<p style={{color: "red"}} >
データを取得できませんでした。
</p>
)
:loading ? (
<p style={{color: "green"}}>
loading...
</p>
)
:(
<div>
<p>{sample.status}</p>
<p>{sample.message}</p>
<UsersApi></UsersApi>
</div>
)
}
</div>
);
}
export default Sample;
#SampleController
class Api::V1::SampleController < ApplicationController
def index
render json: { status: 200, message: "Hello World!"}
end
def getUsersList
usersList = User.all
render json: usersList
end
end
0