如何解决我的"Objects are not valid as a React child"问题？

Question

我构建了以下示例来学习react/redux。这是我的减速器：

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

在这一点上，一切都很好。然而，我试图遵循本教程将REDUX REDUCERS应用于阵列，并在使用以下代码更新我的REDUCERS:

//========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')

我有这个错误...Objects are not valid as a React child (found: object with keys {value, warning})....

看看这里的其他问题，这似乎是一个反复出现的问题，但解决方案总是不同的。这个错误消息的真正含义是什么？我该如何解决这个问题？我的组件中有什么需要修改的吗？

这是我的JSBin和更新的减速器。

感谢

Answer 1

您试图直接在JSX中呈现对象，但这是不允许的。

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

这里的测试是一个对象，而不是一个有效的React子对象。尝试

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

更新的JSBIN