[React 오류]Objects are not valid as a React child -> Props로 값 넘기기

db에서 가져온 데이터를 담고 있는 let 변수를 List라는 함수형 컴포넌트에 매개변수로 값을 전달하였다. 

이 변수를 JSX를 통해 출력했다. 

그러자 아래와 같은 오류 메세지가 나왔다. 

 

에러가 난 이유

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

이 Object는 리액트 자식으로 유효하지 않다. 라는 뜻이다.

 

부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때에는 props로 넘기는 것이 바람직하다. 

props란 컴포넌트 사이에서 상위 -> 하위 컴포넌트로 데이터를 전달할 때 사용하는 것이다. 단방향적이며 자식 -> 부모 는 다른 방법을 사용한다. 

 

나는 props로 값을 전달하는 것이 아닌, 단순  일반 변수를 전달했다. 

 

props로의 값 전달로 바꿔줘야 한다. 

 

 

해결

props 값 전달로 변경하였다. 

상세 코드는 아래와 같다 (중간 생략)

<부모>

1. Axios로 db에서 정보를 가져온 후 state변수에 저장하는 부분

rewardPoints에 적립금 정보가 저장된다. 

let [rewardPoints,setRewardPoints] = useState(0);
let temp_reward_points=null;
useEffect(() => {
    Axios.get("http://localhost:8000/api/userinfo", {
        params: { user: User.email },
      })

        .then((res) => {
          setUserdata([...userData,...res.data]);
          temp_reward_points = res.data[0].reward_points;
          setRewardPoints(temp_reward_points)
      
        })
        .catch((err) => {
          console.log(err.message);
        });

2. JSX -> 자식 컴포넌트인 <List>에 props로 데이터 전달한다. 

List에서는 props.cartdata~~ , props.rewardPoints 로 넘겨받은 props를 쓸 수 있다. 

  return (
    <CartFrame>
      <Frame>
        <DivTable>
          <List cartdata={cartdata} reward_points={rewardPoints} />

<자식>

function List(props) {
	return (
    	<>
        	<p>{props.reward_points}</p>
        </>
        )
}

 

오류가 사라졌고 잘 출력이 되고 있다.