我的组件没有渲染,我也没有收到任何错误。我已经被这个错误困住了几个小时,所以我正在寻找任何建议!
我正在尝试使用 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);
索引.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( Action 文件)
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';
这是一个有趣的问题,因为正如您所说,它不会抛出任何错误...当您用 redux 存储和 react-router 包装它时。
如果你只是简单地做:
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-Router 吞没了,我还没有深入到哪里。在以后的故障排除中,请始终尝试简化您的问题。尽可能让所有东西都尽可能简单,然后构建它,直到出现错误 - 我取消了你的 redux store 和 react-router 包装,这就是我能够发现它的方式。
试试看,确保它不只是在我的构建上。
关于javascript - React/Redux 组件不会渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39823199/