FINAL EDIT:
This question got too far away from point of it. Will not continue it.
*=====
This is edited question since we made a lot of advancement and came to this problem. Old question is left below.
I fetch data from API and get result but when trying to change state hook it gets changed.
// state hook
var [listaClanarina, setListaClanarina] = useState(null)
// this is function for easier fetching so i do not need to populate all data.
// It returns pure response to callback
window.fetchAPI('/clanarina/list', 'GET',
null,
null,
function(response) { // callback
response.json().then((clanarine) => {
Solution1(clanarine)
setTimeout(function() {
Solution2(clanarine)
}, 5000) // need to set timeout, if not both results are wrong
})
})
function Solution1(clanarine) {
console.log(clanarine)
setListaClanarina(JSON.parse(JSON.stringify(clanarine)))
// This one work normally
}
function Solution2(clanarine) {
console.log(clanarine)
setListaClanarina(clanarine)
// This one prints array where all properties `USERNAME` are `true` or `false`
}
So why does this happen?
================== old question with all edits =====================
I have express.js API function which produce response like this:
// Copied from linux console/terminal
[
RowDataPacket {
KORISNIK: 'ddd',
MESEC: 5,
DATUM_PLACANJA: 2022-07-27T22:00:00.000Z
},
RowDataPacket {
KORISNIK: 'finalKorisnik',
MESEC: 5,
DATUM_PLACANJA: 2022-07-27T22:00:00.000Z
}
]
When I try accessing that endpoint through Postman, I get this result (which is okay)
// Copied from linux console/terminal
[
{
"KORISNIK": "ddd",
"MESEC": 5,
"DATUM_PLACANJA": "2022-07-27T22:00:00.000Z"
},
{
"KORISNIK": "finalKorisnik",
"MESEC": 5,
"DATUM_PLACANJA": "2022-07-27T22:00:00.000Z"
}
]
but when I try getting it from my reactjs application i get this response:
// Copied from google chrome console
Array [ {…}, {…} ]
0: Object { KORISNIK: true, MESEC: 5, DATUM_PLACANJA: "2022-07-27T22:00:00.000Z" }
DATUM_PLACANJA: "2022-07-27T22:00:00.000Z"
KORISNIK: true
MESEC: 5
<prototype>: Object { … }
1: Object { KORISNIK: false, MESEC: 5, DATUM_PLACANJA: "2022-07-27T22:00:00.000Z" }
DATUM_PLACANJA: "2022-07-27T22:00:00.000Z"
KORISNIK: false
MESEC: 5
<prototype>: Object { … }
length: 2
<prototype>: Array []
KalendarClanarina.js:32
As you can see, field KORISNIK has true and false values for some reason.
My React Application is parsing all API data good (30+ endpoints) up until now. Only difference I have is I have never requested data with date property so I guess problem is there.
I am simply fetching it from endpoint using fetch function like this:
fetch("http://localhost:3000" + endpoint, {
method: "GET"
})
.then((response) => {
response.json().then((data) => {
console.log(data)
})
})
EDIT: (here is server side code that)
router.get('/list', function(req, res) {
sql.query(`SELECT KORISNIK, MESEC, DATUM_PLACANJA FROM CLANARINA`, (err, resp) => {
if(err) {
console.log(err)
return res.status(500).end()
}
console.log(resp)
return res.json(resp)
})
})
KORISNIK is Varchar(32)
MESEC is Int
DATUM_PLACANJA is DATE
EDIT 2:
I found out temporary solution but I have no idea why is it happening and need to find that out.
Code for fetching data is inside function which looks like this:
window.fetchAPI = function(endpoint, method, contentType, body, callback) {
var auth = cookies.get("ARToken");
fetch("http://localhost:3000" + endpoint, {
method: method,
headers: {
'Content-Type': contentType,
'Authorization': 'bearer ' + auth
},
body: body
})
.then((response) => {
callback(response);
})
}
When i do not need content type and body, I just set them to null and it works in all places.
Now I tried doing same fetch but directly in code side by side with this function and also passing null to see if that was the problem, and looks like it is not the problem since fetch does indeed work.
So take a look at results I am getting and help me find out why:
function ucitajClanarine() {
// Here i use my fetchAPI function like I
// normally do and I get that faulty response
window.fetchAPI('/clanarina/list', 'GET',
null,
null,
function(response) {
response.json().then((clanarine) => {
console.log(clanarine) // faulty parse
setListaClanarina(clanarine)
})
})
// Here I imitate that function with all nulls
// I would pass for content type (authorization is
// not used for this scenario on server but I set it
// just in case just like function would do)
// and also i did not print it inside that .then()
// but passed it to callback function like my
// fetchAPI function does only this time it gives
// right result.
fetch('http://localhost:3000/clanarina/list',
{
method: 'GET',
headers: {
'Content-Type': null,
'Authorization': 'bearer '
},
body: null
}
)
.then((response) => {
ddd(response) // good parse
})
}
function ddd(response) {
response.json().then((data) => {
console.log(data)
})
}
Why does it make this problem when both are totally same?
Here is image of code for side by side comparison:
EDIT 3:
I found the problem. When I remove line setListaClanarina(clanarine) then console prints normal result and in state I still have null. When I add it back, console print wrong result and in state i have wrong array.
EDIT 4: To Summarize this long question,
var [listaClanarina, setListaClanarina] = useState(null)
...
fetch('http://localhost:3000/clanarina/list',
{
method: 'GET',
headers: {
'Content-Type': null,
'Authorization': 'bearer '
},
body: null
}
)
.then((response) => response.json())
.then((uujasyfhaso) => { // set random parameter name for test purposes
console.log(uujasyfhaso)
setListaClanarina(uujasyfhaso) // faulty line
})
If I run code like this i get that wrong response with parameter KORISNIK being true/false
If i delete that faulty line setListaClanarina(uujasyfhaso) I get normal response from that console.log above


