Error - React-Redux error Objects are not valid as a React child (found: object with keys {numOfToys})

 

해당 에러는 'React-Redux_기초'작성중 발생한 에러로 전체코드를 참고필요할시 해당글을 읽어주시기 바랍니다. 

에러원인 : component의 props에 배열, 문자, 정수 등이 들어가야하는데 object(객체)가 들어감

해당코드는 'React-Redux_기초3'에서 참조하였습니다.

// Redux실행시 현재 state에 저장된 기록을 불러옵니다.

const mapStateToProps = (state) => {

console.log('mapStateToProps : ', state);

return {

numOfToys : state,

}

}

numOfToys에 number가 들어가야하는데 state의 객체가 입력이 됨

// 위 함수는 App.js에 추가할 component

function ToyPart(props){

// return할 component

return (

<div>

<h2>Number of Toys -{props.numOfToys} </h2>

<button onClick = {props.buyToy}>Buy Toys</button>

<button onClick = {props.sellToy}>Sell Toys</button>

</div>

)

}

위 component에서 props는 3개로 구성된다.

numOfToys : 장난감의 갯수가 포함된 객체

buyToy : 장난감을 사기위한 액션

sellToy : 장난감을 팔기위한 액션

이 상황에서 에러를 수정할 방법은 2가지 이다. 

numOfToys : state, => numOfToys : state.numOfToys

OR

props.numOfToys => props.numOfToys.numOfToys