JSON return [Object][Object] - reactjs

Question

I'm trying to get data from json file, but it always return [object][object]
Here is json file https://my-json-server.typicode.com/khanh21011999/demo/user
Here is request function to get data
export function requestGetUser() {
return axios({
method: 'get',
url: 'https://my-json-server.typicode.com/khanh21011999/demo/user',
});
}
Here is the method i use to get data
function* loginSaga(action) {
console.log('Saga is working')
const getJson = yield call(requestGetUser) //same
const getJsonData = JSON.stringify(getJson)
const getJsonUsername = String(getJsonData.username)
console.log('GetJson '+getJson)
const getJsonPassword = String(getJsonData.password)
if (String(action.data.username) === getJsonUsername) {
if (String(action.data.password) === getJsonPassword) {
console.log('saga login success')
yield put({type: 'LOGIN_SUCCESS'})
SaveToAsyncStorage(action.data)
}
else {
console.log('saga password fail')
}
}
else {
console.log("saga user fail")
}
}
export {loginSaga}
It return like this
Weird things is i use a online tutorial to get data, it work with that(data show in above image)
worked method
export function* handleGetUser(action) {
try {
const response = yield call(requestGetUser); //same
const { data } = response;
yield put(setUser(data));
} catch (error) {
console.log(error);
}
}
setUser
export const setUser = (user) => ({
type: actionList.SET_USER,
user,
});
GetUserInfo
export const GetUserInfo = (user, password) => {
return{
type: actionList.GET_USER_INFO,
data: {user, password}, //same??
}
};
Here is export function
export function* watchSaga() {
yield takeLatest(GET_USER, handleGetUser); //work
yield takeLatest(GET_USER_INFO,loginSaga) //notwork
}
One different is the worked method have reducer
const initState = {
user: undefined,
};
const User = (state = initState, action) => {
switch (action.type) {
case actionList.SET_USER:
const {user} = action;
return {...state,user};
default:
return state;
}
};
export default User;
But my method have none,(i thoght data was save in state action)

Answer 1

console.log('GetJson ' + getJson); You're printing a concatenation of strings and objects. Modify it to console.log('GetJson ', getJson);
Besides, you should return the res.data from axios.get() method, see Response Schema. You will get the plain object of JavaScript, there is no need to use JSON.stringify().
import axios from 'axios';
export function requestGetUser() {
return axios({
method: 'get',
url: 'https://my-json-server.typicode.com/khanh21011999/demo/user',
}).then((res) => res.data);
}