Question

所以我正在尝试使用React-router配置Redux我已使用this example来设置基本应用。

当我尝试渲染我的组件时，我得到1个错误和2个警告。

错误是：Uncaught TypeError: Cannot read property 'toUpperCase' of undefined。

警告＃1：Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

警告＃2：Warning: Only functions or strings can be mounted as React components.

我只有两个简单的组件。一个Root组件和一个Container组件，用于测试事情是否正常。

根组件的内容：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createHistory } from 'history';
import { createStore, combineReducers } from 'redux';
import { Router, Route } from 'react-router';
import timeline from '../reducers/timeline';

import Container from '../components/Container';

const store = createStore(combineReducers({timeline}));

store.subscribe(() => {
  console.info(store.getState());
})

const history = createHistory();

React.render(
  <Provider store={store}>
    {() =>
      <Router history={history}>
        <Route path="/" component={Container}/>
      </Router>
    }
  </Provider>,
  document.getElementById('root')
);

容器组件的内容：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Container extends Component {
  render() {
    return (
      <div id="outter">
        Container
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);

  return {
    test: state,
  };
}

export default connect(
  mapStateToProps,
  {
    type: 'TEST_ACTION',
  }
)(Container);

以防万一 - 减速机的内容：

const initialState = [
  {id: 1, message: 'Test message'},
];

export default function timeline(state = initialState, action = {}) {
  switch (action.type) {
    case 'TEST_ACTION':
      return initialState;
    default:
      return state;
  }
}

Answer 1

我可以看到的一个问题是你传递给connect组件中的Container函数的第二个参数。你正在传递一个物体。根据{{3}}，如果你传递一个对象，它会期望该对象的属性是动作创建者（它们是函数）。所以它可能看起来像这样：

export default connect(
  mapStateToProps,
  {
    test: () => { type: 'TEST_ACTION' }
  }
)(Container);

然后，将为您的道具添加一个名为test的属性，该属性将是您可以调用以调度测试操作的函数。

Redux + React-router组件无法呈现

1 个答案: