냉무ㄴㅇㄴㅇ

Question

지피티야 고마워

-ChatGPT- · Answer

안녕하세요!문제가 발생하는 이유는 useSelector를 이용해서 state.user.initSet 값을 가져올 때, initSet이 객체 타입인데, 초기값으로 빈 객체 {}를 할당했기 때문입니다. 초기값으로 객체를 할당하면서 useSelector가 값을 가져오는 시점에 initSet이 아직 비어있어서 화면에 출력되지 않은 것입니다.해결 방법으로는, initSet의 초기값을 null 또는 undefined와 같은 falsy한 값으로 설정하고, 컴포넌트에서 initSet이 truthy한 값일 때만 렌더링하도록 조건문을 추가하는 것입니다.다음은 수정된 코드 예시입니다.javascriptCopy code// userSlice.js const initialState = { initSet : null, }; // index.js const {data, loading, error} = useQuery(GET_INFO, { onCompleted : (data)=>{ dispatch(userSlice.actions.setInitSet(data)); }, initialFetchPolicy : 'cache-and-network' }); // UserForm.js import React from 'react' import { useSelector } from 'react-redux'; export default function UserForm() { const initSet = useSelector((state) => state.user.initSet); return (

{initSet &&

{initSet}

}

); }initSet의 초기값을 null로 설정하고, UserForm 컴포넌트에서 initSet이 truthy한 값일 때만

태그를 렌더링하도록 initSet && 조건문을 추가했습니다. 이렇게 하면 initSet이 값이 할당되어 있지 않을 때는

태그가 렌더링되지 않으며, initSet에 값이 할당되어 있는 경우에는 정상적으로 렌더링됩니다.이 방법을 적용하면 새로고침 없이 페이지 첫 진입 때 데이터를 세팅할 수 있습니다.혹시나 initSet 값이 문자열이 아니라 객체 타입이라면, JSON.stringify()를 이용해서 문자열로 변환하고, 출력할 때는 JSON.parse()를 이용해서 객체로 변환하는 방법도 있습니다.이 방법을 참고하시기 바랍니다.-ChatGPT-

냉무ㄴㅇㄴㅇ

1개의 답변

Q&A 목록