Error: Objects are not valid as a React child 해결을 위해 검색해볼 키워드 조언 필요

Question

안녕하세요.eslint를 적용하기 이전 발생하지 않은 에러가 적용이후 발생하여 해결하고 싶습니다. 캡쳐화면의 에러문구를 며칠 구글링 해본 결과다음과 같은 원인이 많았습니다.props를 자식에게 넘길때 중괄호가 누락되어 나온 에러랜더링 요소에 사용되는 props가 객체일시 프로퍼티를 일일히 지정하지 않을시 나온 에러이러한 원인을 점검해봤지만 해결할 수 없었고제 상황을 해결하기에는 더 심오한 원인이 있다고 판단했습니다. 상황을 공개하기 앞서 제가 유추한 원인의 일부는eslint적용 이후 배열을 관리하는 useState에는 추가적으로 검증해줘야할 행위가 필요한 것 같은데,이를 단순히 직역해서 검색하면 엉뚱한 결과가 나와서뭔가 추가적으로 검색해볼 키워드를 조언받고 싶습니다. (해결점을 콕 찝어주시면 더 감사합니다 ㅎㅎ)캡쳐화면 아래로 코드를 남겼습니다.(코드에 연관성이 높지 않아 가독성을 해치는 부분은 ...로 대체하였습니다.)캡쳐화면에 등장하는 파일로 API를 호출하는 부분입니다.//+++ QuizContext.jsx ... // HELPER FUNCTION function shuffleArray(array) { const result = [...array]; for (let i = array.length - 1; i > 0; i -= 1) { const j = Math.floor(Math.random() * (i + 1)); [result[i], result[j]] = [result[j], result[i]]; } return result; } function shuffleQuiz(quiz) { return shuffleArray(quiz).map((each) => ({ ...each, option_array: shuffleArray(each.option_array), })); } // MAIN export const QuizContext = React.createContext(); export function QuizProvider({ children }) { const [quiz, setQuiz] = useState([]); const fetchQuiz = async ({ shuffle }) => { const [quizState, optionHistoryState] = await Promise.allSettled([ axios.get(`${QUIZ_URI}${queryParameter}`), ... ]); if (quizState.status === "rejected") { ... return; } const quizResponse = quizState.value.data.result; setQuiz(shuffle ? shuffleQuiz(quizResponse) : quizResponse); // +++ 에러로 잡힌 부분! ... }; const props = useMemo( () => ({ quiz, fetchQuiz, }), [quiz, queryParameter] ); return {children}; }API의 응답은 다음과 같습니다.{ "isSuccess": true, "message": null, "result": [ { "question_seq": 7, "question": "질문A", "option_array": [ { "question_option_seq": 25, "question_option": "선택지A", "answer_yn": 1 }, { "question_option_seq": 28, "question_option": "선택지B", "answer_yn": 0 }, { "question_option_seq": 26, "question_option": "선택지C", "answer_yn": 0 }, { "question_option_seq": 27, "question_option": "선택지D", "answer_yn": 0 } ] }, { "question_seq": 8, "question": "질문B", "option_array": [ ... ] }, { "question_seq": 9, "question": "질문C", "option_array": [ ... ] } ] }랜더링 요소에 API 응답 데이터를 사용하는 부분입니다.// +++ QuizPage.jsx ... function QuizPage() { const { quiz, fetchQuiz } = useContext(QuizContext); const [activeStep, setActiveStep] = useState(0); const queryParameter = useLocation().search; const { categorySeq, chapterNum } = queryString.parse(queryParameter); useEffect(() => { fetchQuiz({ shuffle: true }); }, [queryParameter]); if (!quiz.length) { return ( ); } return ( {CATEGORY[categorySeq]} ch.{chapterNum} ); }추가로 검색해볼 키워드가 있는지 조언주시면 감사하겠습니다.

Hee Sung Son · Accepted Answer

거두 절미하고 쭉 본이후 아래코드에서 이상한점을 찾았습니다. 참고바랍니다. {CATEGORY[categorySeq]} ch.{chapterNum} <--- 이부분이 렌더링 안될 듯 이상함 위에서 보니까 텍스트로 출력 하는 부분같은데 그렇다고하면 {`${CATEGORY[categorySeq]} ch.${chapterNum}`} 해야 출력될듯

페코옹 · Answer

단순히 코드 버그로 보이네요.fetch quiz 함수에서 정상적으로 데이터를 받고 있는지 확인해보세요.그리고 quiz를 복수형으로 사용하셔서 가독성을 올려주시는 걸 추천드려요.

Error: Objects are not valid as a React child 해결을 위해 검색해볼 키워드 조언 필요

2개의 답변

#eslint 목록