어떻게 "Objects is React Child"문제를 해결할 수 있습니까?

Question

반응/redux에 대해 알아 보려면 다음 example을 작성했습니다. 여기 제가 가지고있는 감속기는 다음과 같습니다.

const tableFilter = (state = 0, action) => { 
    if(action.type === 'SET_TABLE_DATA') { 
     return state + 1; 
    } 
     return state; 
    } 

그 시점에서 모든 것이 정상적으로 작동합니다. 다음 코드를 사용하여 내 감속기를 업데이트 할 때 나는이 튜토리얼 APPLYING REDUX REDUCERS TO ARRAYS을 따르려고 노력하고 있어요 그러나 : 내가 여기에 다른 질문을 보면이 오류 ...Objects are not valid as a React child (found: object with keys {value, warning})....

있어

//========Reducer=================== 
const INITIAL_STATE = { 
    value: 0, 
    warning: false 
} 
const update = (state, mutations) => Object.assign({}, state, mutations) 
const tableFilter = (state = INITIAL_STATE, action) => { 
    if(action.type === 'SET_TABLE_DATA') { 
    return state = update(state, { value: state.value + 1 }) 
    } 
    return state; 
} 
const FilterApp = combineReducers({tableFilter}); 
//================================== 

const DisplayTable = ({test, DisplayTable}) => { 
    return (
    <div> 
     <button onClick={DisplayTable}>{test}</button> 
     <p></p> 
    </div> 
) 
} 

function mapStateToProps(state) { 
    return { 
     test: state.tableFilter 
    }; 
}; 

const mapDispachToProps = (dispatch) => { 
    return { 
    DisplayTable:() => { 
     dispatch (setTableFilter()); 
    } 
    }; 
}; 

const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable); 
ReactDOM.render(
    <Provider store={createStore(FilterApp)}> 
    <App /> 
    </Provider>, 
    document.getElementById('root') 

이 재발하는 문제가 될 것 같다 그러나 솔루션은 항상 다릅니다. 이 오류 메시지는 실제로 무엇을 의미합니까? 내 경우에 어떻게 해결할 수 있습니까? 구성 요소에서 수정할 필요가있는 것이 있습니까?

여기 업데이트 된 감속기가있는 JSBin입니다.

감사

Answer 1

는 직접 JSX에서 객체를 렌더링하려하고는 허용되지 않습니다.

<button onClick={DisplayTable}>{test}</button> 

여기서 test는 유효한 React 하위가 아니라 객체입니다.

<button onClick={DisplayTable}>{String(test.warning)} {test.value}</button> 

난 당신이 게시 한 코드의 구성 요소가 표시되지