[React&JS] Objects are not valid as a React child(found: object with keys {pathname, state, search, hash, key}) 오류

먼저 나는 <Link to= {{}} />를 사용하여 state 값을 자식 컴포넌트로 넘겨주는 것을 구현했다. 근데 막상 버튼을 눌러 페이지 링크가 이동되고 나니까 위와 같은 오류가 떴다. 다른 블로그를 찾아보니 React에서 {this.state} 상태 값을 출력, 사용할 때 뜨는 에러라고 한다.

 

 

 

 

FinalCart.js

현재 내 코드는 아래와 같다.

import React from 'react';
import {useLocation} from 'react-router-dom';

function FinalCart() {
	// sum에서 부모 컴포넌트가 넘겨준 state 값을 받아온다.
	const sum = useLocation(); 
    
    // ...
    
    return (
    	<div>총 금액: {sum}</div>
    );
}

export default FinalCart;

{sum}을 사용하면서 오류가 나는 것인데, 이 sum 값이 Object이기 때문에 문자열로 보여줄 수 없어서 뜨는 것이다.

 

 

그래서

{sum.state.sum}

처럼 하나씩 지정해서 출력하거나 (내 코드에서는 이렇게 사용하면 된다.)

 

{JSON.stringify(sum.state)}

처럼 직렬화해주는 JSON.stringify()를 사용하면 오류가 나지 않고 화면에 값이 잘 출력된다!

 

 

 

 

(전 블로그에서 2021.02.13 16:48에 작성된 글입니다.)