React JS / Node JS：从获取API响应中映射数组与对象的问题

Question

我是Node新手，有反应，如有错误请多多包涵。

我想向后端发出 POST 请求，并得到响应。响应是一个包含对象的数组。然后，我想映射数组并将其呈现在组件中。

我可以在前端得到响应并登录控制台如下：

阅读 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 中设置当前状态，因为它在控制台中记录了一些空的内容。 任何人都可以帮忙吗？提前谢谢你。

我的反应代码：

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);
}
}

Answer 1

如果有这样的反应：

  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>
      ))}
    </>
  );