(도와주세요,,) 마운트 시 Context API의 setter 함수로 state 값 변경하고 즉시 반영하고 싶습니다.

Question

CatContext.tsximport { useState, createContext, ReactNode } from "react"; // Context Type type CatContextType = { // GV : Global Variable catIdArrGV: string[]; catProfilePhotoUrlArrGV: string[]; currentSelectedCatIdGV: string; // setter 함수 setCatIdArrGV: (idArr: string[]) => void; setCatProfilePhotoUrlArrGV: (photoUrlArr: string[]) => void; setCurrentSelectedCatIdGV: (id: string) => void; }; // Default Context const defaultCatContext = { // GV catIdArrGV: [], catProfilePhotoUrlArrGV: [], currentSelectedCatIdGV: "", // setter 함수 setCatIdArrGV: () => {}, setCatProfilePhotoUrlArrGV: () => {}, setCurrentSelectedCatIdGV: () => {}, }; // CatContext 생성 export const CatContext = createContext(defaultCatContext); // Provider Props // React 18 버전부터 더 이상 children을 제공하지 않기 때문에 // 직접 cildren의 타입을 지정하고 전달해 주어야 합니다. interface ProviderProps { children: ReactNode; } export const CatContextProvider = ({ children }: ProviderProps) => { const [catIdArrGV, setCatIdArrGV] = useState([]); const [catProfilePhotoUrlArrGV, setCatProfilePhotoUrlArrGV] = useState< string[] >([]); const [currentSelectedCatIdGV, setCurrentSelectedCatIdGV] = useState(""); return ( {children} ); }; Main.tsx// Context import { UserContext } from "../contexts/UserContext"; import { CatContext } from "../contexts/CatContext"; // Hook import { useEffect, useContext, useState } from "react"; const Main = () => { // #############################가짜 메인 데이터############################# const fakeMainData = [ { name: "카게야마", age: "17", weight: "70", hydrationGuage: 47 }, { name: "히나타", age: "17", weight: "50", hydrationGuage: 29 }, { name: "츠키시마", age: "17", weight: "75", hydrationGuage: 98 }, { name: "야마구치", age: "17", weight: "70", hydrationGuage: 90 }, { name: "스가", age: "19", weight: "65", hydrationGuage: 76 }, { name: "아사히", age: "19", weight: "80", hydrationGuage: 110 }, { name: "니시노야", age: "18", weight: "50", hydrationGuage: 130 }, { name: "타나카", age: "18", weight: "70", hydrationGuage: 180 }, ]; // 관리 스페이스의 메인 데이터를 불러오고 저장하기 위한 전역변수, setter 함수 불러오기 const { managementSpaceIdGV } = useContext(UserContext); const { catIdArrGV, setCatIdArrGV, catProfilePhotoUrlArrGV, setCatProfilePhotoUrlArrGV, currentSelectedCatIdGV, setCurrentSelectedCatIdGV, } = useContext(CatContext); // 현재 선택된 고양이의 프로필 사진 state const [currentSelectedCatPhotoUrl, setCurrentSelectedCatPhotoUrl] = useState(""); // 현재 선택된 고양이의 메인 정보 state const [catName, setCatName] = useState(""); const [catAge, setCatAge] = useState(""); const [catWeight, setCatWeight] = useState(""); const [hydrationGuage, setHydrationGuage] = useState(0); const [hydrationGuageColor, setHydrationGuageColor] = useState(""); // 마운트 시, 해당 관리 스페이스에서 관리하는 고양이의 Id와 프로필 사진 리스트 전역변수로 저장하기 useEffect(() => { setCatIdArrGV(["kage", "hina", "tuki", "yama", "suga", "asa", "nishi", "tana"]); setCatProfilePhotoUrlArrGV(["url1", "url2", "url3", "url4", "url5", "url6", "url7", "url8"]); setCurrentSelectedCatIdGV("kage"); }, []); // currentSelectedCatIdGV 값이 바뀔 때마다, // currentSelectedCatPhotoUrl state 값 바꿔서 MainView에 띄울 고양이 프로필 사진 바꾸고, // 해당 고양이의 mainInfo 불러와 데이터 바인딩 useEffect(() => { // ###########CatContext의 state 값 바뀌었나 확인했으나 모두 초깃값이 나옴############# console.log(catIdArrGV); console.log(catProfilePhotoUrlArrGV); console.log(currentSelectedCatIdGV); // currentSelectedCatPhotoUrl 바꾸기 setCurrentSelectedCatPhotoUrl( catProfilePhotoUrlArrGV[catIdArrGV.indexOf(currentSelectedCatIdGV)] ); // 나머지 mainInfo 바꾸기 setCatName(fakeMainData[catIdArrGV.indexOf(currentSelectedCatIdGV)].name); setCatAge(fakeMainData[catIdArrGV.indexOf(currentSelectedCatIdGV)].age); setCatWeight( fakeMainData[catIdArrGV.indexOf(currentSelectedCatIdGV)].weight ); setHydrationGuage( fakeMainData[catIdArrGV.indexOf(currentSelectedCatIdGV)].hydrationGuage ); }, [currentSelectedCatIdGV]); return (...생략...) }; export default Main;CatContextProvider는 최상위 컴포넌트에서 Main 컴포넌트를 잘 감싸고 있습니다.아직 데이터 불러올 API가 호스팅되지 않았기에, 가짜 데이터를 만들어서 했습니다.그런데 Main.tsx의 첫 번째 useEffect에서 CatContext의 catIdArrGV, catProfilePhotoUrlArrGV, currentSelectedCatIdGV를 setter함수를 통해 값을 바꿨음에도, 두 번째 useEffect에서 출력했을 때, 바뀐 값이 아닌 초깃값이 출력됩니다.제 추측으로는, useState가 비동기적으로 처리돼서 바뀐 값이 즉시 반영이 안되는 것 같습니다..(?)그래서 Cannot read property 'name' of undefined라는 에러가 출력되고 있습니다.어떻게 고칠 수 있을까요..??읽어주셔서 감사합니다.

그렌리옹 · Answer

세번 바꾸실 데이터를 CatInfo 이런 이름으로 한개의 장소에 데이터를 key로 분류해서 모으시고 한번에 바꿔보세요

(도와주세요,,) 마운트 시 Context API의 setter 함수로 state 값 변경하고 즉시 반영하고 싶습니다.

1개의 답변

Q&A 목록