Redux + React-router 组件不渲染 [英] Redux + React-router component not rendering

问题描述

所以我试图用 Redux 配置 React-router 我用过 这个例子 来设置一个基本的应用程序.

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

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

警告 #1:警告:React.createElement:类型不应为空或未定义.它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件).

警告 #2:警告:只有函数或字符串可以作为 React 组件挂载.

我只有两个简单的组件.一个 Root 组件和一个 Container 组件来测试一切是否正常.

Root 组件的内容:

import React, { Component } from 'react';从'react-redux'导入{提供者}；从历史"导入 { createHistory };import { createStore, combineReducers } from 'redux';从反应路由器"导入{路由器，路由}；从'../reducers/timeline'导入时间线；从'../components/Container'导入容器；const store = createStore(combineReducers({timeline}));store.subscribe(() => {控制台信息(store.getState());})const 历史 = createHistory();反应.render(<提供者商店={商店}>{() =><路由器历史={历史}><Route path="/" component={Container}/></路由器>}</提供者>,document.getElementById('root'));

Container 组件的内容:

import React, { Component } from 'react';从'react-redux'导入{连接}；类容器扩展组件{使成为() {返回 (<div id="外部">容器

);}}函数 mapStateToProps(state) {控制台日志(状态)；返回 {测试:状态，};}导出默认连接(mapStateToProps，{类型:'TEST_ACTION'，})(容器);

以防万一 - 减速器的内容:

const initialState = [{id:1，消息:'测试消息'}，];导出默认函数时间轴(状态 = 初始状态，动作 = {}){开关(动作.类型){案例TEST_ACTION":返回初始状态；默认:返回状态；}}

解决方案

我能看到的一个问题是你传递给 Containerconnect 函数的第二个参数> 组件.您正在传递一个对象.根据文档，如果您传递一个对象，它将期望该对象的属性是动作创建者(即函数).所以它可能看起来像这样:

导出默认连接(mapStateToProps，{测试:() =>{ 类型:'TEST_ACTION' }})(容器);

然后会向您的道具添加一个名为 test 的属性，您可以调用该函数来分派测试操作.

So I'm trying to configure React-router with Redux I've used this example to setup a basic app.

When I try to render my components I get 1 error and 2 warnings.

The error is: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined.

Warning #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).

Warning #2: Warning: Only functions or strings can be mounted as React components.

I just got two simple component. A Root component and a Container component to test if things are working fine.

Content of the Root component:

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')
);

Content of the Container component:

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);

Just in case - the content of the reducer as well:

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

解决方案

One problem I can see is in the second parameter you are passing to the connect function in the Container component. You are passing an object. According to the documentation, if you pass an object it will expect the properties of that object to be action creators (which are functions). So it might look something like this:

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

That will then add a property to your props called test which will be a function that you can call to dispatch the test action.

这篇关于Redux + React-router 组件不渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！