2016-10-03 116 views
1

我的組件不渲染,我沒有收到任何錯誤。我一直堅持這個錯誤幾個小時,所以我正在尋找任何建議!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; 

回答

2

我能夠重新創建一個樣板模板我有項目,還能夠重新創建您的問題。

在你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存儲庫和反應路由器包裝,這是我能夠發現它的原因。

試試看,確保它不只是在我的構建。