Question

我已经构建了以下example来了解react / redux。这是我的减速机：

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

此时一切正常。但是，我正在尝试按照本教程APPLYING REDUX REDUCERS TO ARRAYS和使用以下代码更新我的reducer：

//========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和更新的reducer。

谢谢

Answer 1

您尝试直接在JSX中渲染对象，而这是不允许的。

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

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

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

更新了JSBIN

我如何解决“对象无效作为React child”问题？

1 个答案: