I am new to Node and react, please bear with me if there are numpty mistakes.
I want to make a POST request to backend , and get back a response. The response is an array with objects inside. Then, I would like to map the array and render it in a component.
I can get the response in frontend and log in console as following:
reading react-dev-tools and the component of VideoConferenceRoom shows:
[
{
"name": "State",
"value": [
{
"id": 1,
"video_room_pw": "57e2c460-3e7f-11eb-9c9c-a329bc0bc2e2",
"video_room_name": "57e2eb70-3e7f-11eb-9c9c-a329bc0bc2e2",
"video_hashed_room_name": null,
"video_room_url": "meet.jit.si/57e2eb70-3e7f-11eb-9c9c-a329bc0bc2e2"
},
{
"id": 2,
"video_room_pw": "13e074c0-3e8d-11eb-8192-4bf84e5d2275",
"video_room_name": "13e074c1-3e8d-11eb-8192-4bf84e5d2275",
"video_hashed_room_name": null,
"video_room_url": "meet.jit.si/13e074c1-3e8d-11eb-8192-4bf84e5d2275"
}
],
"subHooks": []
},
{
"name": "Effect",
"value": "ƒ () {}",
"subHooks": []
}
]
console logging response.videoRooms:
But when I update the response array in useState hook, nothing is being mapped onto the page. The problem seems to be not able to set the current state in useState hook currentVideoRoom, because it logged something empty in console. Can anyone help? Thank you in advance.
My react code:
import React, { useEffect, useState } from "react";
import { Paper } from '@material-ui/core';
const VideoConferenceRoom = ({currentWorkspace}) => {
const [currentVideoRoom, setCurrentVideoRoom] = useState([]);
let listItems;
useEffect(()=>{
const getVideo = async()=>{
const body = {currentWorkspace};
try{
const getVideoInfo = await fetch(`http://localhost:4000/workspace/${currentWorkspace}/video/rooms`,{
method:"POST",
headers: {
"Content-Type":"application/json",
"x-access-token": localStorage.getItem("token")
},
body: JSON.stringify(body)
})
const response = await getVideoInfo.json();
setCurrentVideoRoom(prevItems => [...prevItems, response.videoRooms])
console.log(currentVideoRoom);
listItems = response.videoRooms;
}catch(e){
console.error(e.message);
}
}
getVideo();
},[]);
return(
<>
<h1>Join the video meetings!</h1>
{currentVideoRoom.map((item)=>{
<Paper elevation={3}>
{item}
</Paper>
})}
</>
)
};
export default VideoConferenceRoom;
console logging getVideoInfoFromSameWorkspaceArr in backend :
[ { id: 1,
video_room_pw: '57e2c460-3e7f-11eb-9c9c-a329bc0bc2e2',
video_room_name: '57e2eb70-3e7f-11eb-9c9c-a329bc0bc2e2',
video_hashed_room_name: null,
video_room_url: 'meet.jit.si/57e2eb70-3e7f-11eb-9c9c-a329bc0bc2e2' },
{ id: 2,
video_room_pw: '13e074c0-3e8d-11eb-8192-4bf84e5d2275',
video_room_name: '13e074c1-3e8d-11eb-8192-4bf84e5d2275',
video_hashed_room_name: null,
video_room_url: 'meet.jit.si/13e074c1-3e8d-11eb-8192-4bf84e5d2275' } ]
my code in backend :
const knex = require("../models/knex");
exports.postVideoShowRoom = async(req,res)=>{
const {currentWorkspace} = req.body;
try{
//get users from same workspace , more than 1 user in ws?
let getCurrentWorkspace = await knex('workspace').select().where('workspace_name', currentWorkspace);
console.log(getCurrentWorkspace,'this is getCurrentWorkspace')
let getVideoIdFromSameWorkspace ;
let getVideoInfoFromSameWorkspace ;
let getVideoInfoFromSameWorkspaceArr = [];
for (let item of getCurrentWorkspace){
getVideoIdFromSameWorkspace = await knex('video_workspace').select().where('workspace_id', item.id);
console.log(getVideoIdFromSameWorkspace, 'this is getVideoIdFromSameWorkspace')
}
for (let item of getVideoIdFromSameWorkspace){
getVideoInfoFromSameWorkspace = await knex('video').select().where('id', item.video_id);
getVideoInfoFromSameWorkspaceArr.push(getVideoInfoFromSameWorkspace[0]);
}
console.log(getVideoInfoFromSameWorkspaceArr, 'this is getVideoInfoFromSameWorkspaceArr')
res.json({
videoRooms: getVideoInfoFromSameWorkspaceArr,
})
}catch(e){
console.error(e.message);
}
}

videoRoomsalso appears to be an array, so unless you meant to nest the array I think you should also spread it,setCurrentVideoRoom(prevItems => [...prevItems, ...response.videoRooms]). After this you'll likely see an error that react can't render objects, asitemwill be one of those room objects.console.log(currentVideoRoom)will display the value ofcurrentVideoRoomfrom the closure. I.e. this value will never change until the next render. Is it not working other than that?console.log(currentVideoRoom);will show the old value due to asynchronous nature of state, but rendering should work. Try updating your codesetCurrentVideoRoom(prevItems => [...prevItems, ...response.videoRooms])