[英]React JS / Node JS : Problem mapping array with objects inside from fetch API response
我是 Node 新手并做出反应,如果有很多错误,请多多包涵。
我想向后端发出 POST 请求,并得到响应。 响应是一个包含对象的数组。 然后,我想 map 数组并将其呈现在组件中。
我可以在前端获得响应并登录控制台,如下所示:
阅读 react-dev-tools 和 VideoConferenceRoom 的组件显示:
[
{
"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": []
}
]
控制台记录 response.videoRooms:
但是当我在 useState 钩子中更新响应数组时,没有任何东西被映射到页面上。 该问题似乎无法在 useState 挂钩 currentVideoRoom 中设置当前 state,因为它在控制台中记录了一些空内容。 任何人都可以帮忙吗? 先感谢您。
我的反应代码:
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;
控制台在后端记录 getVideoInfoFromSameWorkspaceArr:
[ { 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' } ]
我在后端的代码:
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);
}
}
如果这样的反应:
const response = { videoRooms: [ { 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' } ]
};
利用:
setCurrentVideoRoom((prevItems) => [...prevItems, ...response.videoRooms]);
并将渲染更改为:
return (
<>
<h1>Join the video meetings!</h1>
{currentVideoRoom.map((item) => (
<Paper elevation={3}>
<p>{item.id}</p>
<p>{item.video_room_name}</p>
<p>{item.video_room_url}</p>
</Paper>
))}
</>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.