React / Redux组件不会渲染 [英] React/Redux Component will not render

问题描述

我的组件没有渲染，也没有出现任何错误。我已经在这个错误上停留了几个小时，所以我正在寻找任何建议！

My component is not rendering and I am not getting any errors. I have been stuck on this error for a few hours now so I am looking for any advice!

我正尝试使用加载页面时显示的数据> componentWillMount（），目前没有任何显示。在我能够使用组件渲染简单的字符串之前。现在我没有从组件中获得任何控制台日志，没有文本，什么都没有...我的api可以正常工作，但是在chrome控制台中没有获得http调用。以下是我的文件。

I am trying to get a data to display when page loads using componentWillMount() and nothing is currently showing up. Before I was able to render simple strings with the component. Now I am not getting any console logs from components, not text, nothing... my api works but I am not getting http calls in chrome console. Below are my files.

indexTimesheet.js（组件）

indexTimesheet.js (component)

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（动作文件）

getTime.js (action file)

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

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

推荐答案

我能够在我拥有并且还能够重新创建您的问题的样板模板。

I was able to re-create your project in a boilerplate template I have and was also able to re-create your issue.

在您的index.js中：

In your index.js:

//组件

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

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

Should be this - no brackets around the component:

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

这是一个有趣的问题，因为正如您所说，它不会引发任何错误...

This is an interesting problem because, as you say, it throws no errors...when you have it wrapped with the redux store and 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商店并进行了React-router包装，这就是我能够发现它的方式。

So somewhere that error is being swallowed by Redux/React-Router, I haven't dug into where. In future troubleshooting always try to simplify your problem. Make everything as bare-bones as possible and then build it until you get the error - I took off your redux store and react-router wrapping which was how I was able to uncover it.

尝试一下，确保它不仅在我的构建中。

Try it out and see to make sure it wasn't just on my build.

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