React/Redux 组件不会渲染答案

【问题标题】：React/Redux Component will not renderReact/Redux 组件不会渲染
【发布时间】：2017-02-10 21:38:43
【问题描述】：

我的组件没有渲染，我没有收到任何错误。我已经被这个错误困住了几个小时，所以我正在寻找任何建议！

我正在尝试使用 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
  };
}

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;

【问题讨论】：

标签： javascript reactjs components redux

【解决方案1】：

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

在你的 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 存储和 react-router 包装，这就是我能够发现它的方式。

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

【讨论】：