import axios from "axios";
import React, { useEffect, useState, useRef } from "react";
import { useParams, useSearchParams } from "react-router-dom";
import { API_END_POINT } from "../utils/API";
const RoomPage = () => {
sessionStorage.setItem("UID", "3");
const userUid = sessionStorage.getItem("UID");
const roomId = useParams().roomId;
const [serchParams, setSerchParams] = useSearchParams();
const guid = serchParams.get("guid");
const [role, setRole] = useState(userUid);
const [roomInfo, setRoomInfo] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchRoomInfo = async () => {
try {
setError(null);
setLoading(true);
setRole(userUid);
setRoomInfo(null);
await axios.all([axios.get(`${API_END_POINT}/group/${roomId}/${userUid}`), axios.get(`${API_END_POINT}/group/${roomId}/attendance`), axios.get(`${API_END_POINT}/group/${roomId}/count`)]).then(
axios.spread((response1, response2, response3) => {
const res1 = response1.data.groupInfo;
const attendanceState = response1.data.attendanceState;
const attendanceCode = response2.data;
const count = response3.data;
const response = { ...res1, attendanceCode, attendanceState, count };
setRoomInfo(response);
})
);
} catch (e) {
console.log(e.message);
setError(e);
}
setLoading(false);
};
useEffect(() => {
fetchRoomInfo();
}, []);
if (loading) return
로딩중
; if (error) return
에러 발생
; // if (roomInfo.leader_uid === role) {
// return (
//
//
// {roomInfo.group_title}
//
//
{roomInfo.group_detail}
//
인원 : {roomInfo.count}명
//
// 초대 코드 :{" "}
//
// {roomInfo.invite_code}
//
//
// 초대코드 확인하기
//
//
//
// );
// }
};
export default RoomPage;
주석처리된 리턴부분에서 null에 접근한다고 오류남
콘솔찍어보면 기본값인 null이 몇번찍히고 나서야 roomInfo에 response 가 들어간 로그가 찍힘
그럼 set되기전에 jsx에서 접근 하는거같은데 문제는 다른페이지에서 이거랑 거의 같은 구조로 짤땐 이런문제가 없었음...
대체 머가문제일가요
- dc official App
roomInfo가 최초엔 언디파인드,널이기때문임 꺼내쓰는 애들을 다 state처리하던지 꺼내쓸때 or처리를 해주셈
roomInfo.leader_uid라고치면 넣어주지도 않았는데leader_uid를 꺼내쓸라카고있자늠
아시잘 if로 roominfo 한번 체크해주니까 바로뜨네요 아놔 이전것들은 이러지않아도 왜 잘된거지 - dc App