React/Redux组件不会渲染

问题描述：

我的组件不渲染，我没有收到任何错误。我一直坚持这个错误几个小时，所以我正在寻找任何建议！React/Redux组件不会渲染

我试图获得一个数据显示，当页面加载使用componentWillMount（）并没有任何显示。在我能够使用组件呈现简单的字符串之前。现在我没有从组件获取任何控制台日志，没有文本，没有任何...我的api工作，但我没有在Chrome控制台中获得http调用。以下是我的文件。

indexTimesheet.js（组分）

import React, {Component, PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import getTimesheet from '../actions/getTime'; 

class IndexTimesheet extends Component { 
    componentWillMount() { 
    console.log("test"); 
    this.props.getTimesheet(); 
    } 

    render() { 
    return (
     <h3>Index Timesheet</h3> 
    ); 
    } 
} 

IndexTimesheet.propTypes = { 
    getTimesheet: PropTypes.func 
}; 

export default connect(null, {getTimesheet})(IndexTimesheet);

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Provider} from 'react-redux'; 
import {createStore, applyMiddleware} from 'redux'; 
import {Router, Route, browserHistory} from 'react-router'; // , IndexRoute 
import promise from 'redux-promise'; 
import reducers from './app/reducers'; 

const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 

// components 
import {IndexTimesheet} from './app/components/indexTimesheet'; 

ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}> 
    <Router history={browserHistory}> 
    <Route path="/" component={IndexTimesheet}/> 
    </Router> 
</Provider>, 
document.getElementById('root') 
);

getTime.js（动作文件）

import axios from 'axios'; 
export const GET_TIME = 'GET_TIME'; 
export const ROOT_URL = 'http://127.0.0.1:3055/api/v1/timesheet/'; 


export function getTimesheet() { 
    const request = axios.get(ROOT_URL); 

    return { 
    type: GET_TIME, 
    payload: request 
    }; 
}

时间表reducer.js

import {GET_TIME} from '../actions/getTime'; 
const INITIAL_STATE = {all: [], user: []}; 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case GET_TIME: 
    return {state, all: action.payload.data}; 
    default: 
    return state; 
    } 
}

指数减速

import {combineReducers} from 'redux'; 
import TimesheetReducer from './timesheet'; 

const rootReducer = combineReducers({ 
    time: TimesheetReducer 
}); 

export default rootReducer;

答

我能够重新创建一个样板模板我有项目，还能够重新创建您的问题。

在你index.js：

//组件

import {IndexTimesheet} from './app/components/indexTimesheet';

应该是这样 - 组件周围没有括号：

import IndexTimesheet from './app/components/indexTimesheet';

这是一个有趣的问题，因为正如你说，它不会引发错误... 当你有它与REDEX存储和反应路由器包装。

如果你要简单地做：

ReactDOM.render(<IndexTimesheet />, document.getElementById('root'));

这将引发错误：

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).warning @ warning.js:45ReactElementValidator.createElement @ ReactElementValidator.js:221(anonymous function) @ index.js:37(anonymous function) @ index.js:39(anonymous function) @ index.js:40(anonymous function) @ bundle.js:1036__webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ multi_main:3(anonymous function) @ bundle.js:586__webpack_require__ @ bundle.js:556(anonymous function) @ bundle.js:579(anonymous function) @ bundle.js:582 
invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

这样的地方，错误是由终极版/阵营，路由器吞噬，我没有挖到哪里。在将来的故障排除中，请尽量简化您的问题。尽可能让所有东西尽可能地完整，然后构建它，直到出现错误 - 我脱下了您的redux存储库和反应路由器包装，这是我能够发现它的原因。

试试看，确保它不只是在我的构建。

React/Redux组件不会渲染

相关推荐