2

因此，我尝试使用此示例React-router进行配置，以设置基本应用程序。Redux

当我尝试渲染我的组件时，我收到 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')
);

Container 组件的内容：

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;
  }
}
4

1 回答 1

2

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

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

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

于 2015-09-08T04:58:28.607 回答