Redux-React：身份验证 - 未定义渲染答案

【问题标题】：Redux-React: Authentication - render is not definedRedux-React：身份验证 - 未定义渲染
【发布时间】：2016-09-27 10:23:31
【问题描述】：

抱歉，我是 redux 新手并做出反应

我在stackoverflow上有一些代码跟随示例，并产生错误，但我不知道修复，有人帮助我

actions/login.js

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export function login(login, password) {
   return {
      type: LOGIN,
      login,
      password
   }
}

组件/LoginForm.js

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
   render () {
     console.log("LoginForm")
      return (
         <div>
            <form action="#" onSubmit={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }

   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmit(this.login.value, this.password.value);
   }
}

LoginForm.propTypes = {
   onSubmit: PropTypes.func.isRequired
};

export default LoginForm;

容器/App.js

import { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../actions/login'
import LoginForm from '../components/LoginForm'

class App extends Component {
   render () {

      const { dispatch } = this.props;

      return (
         <div>
            <LoginForm onSubmit={(id, pass) => dispatch(login(id, pass))} />
         </div>
      )
   }
}

const mapStateToProps = (state) => {
   return {}
};
const mapDispatchToProps = (dispatch) => {
   return {}
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

Reducers/rootReducer.js

import { combineReducers } from 'redux'
import { LOGIN, LOGOUT } from '../actions/login'

const initialState = {
   cid: null,
   username: '',
   logo: ''
};

const userLogin = (state = initialState, action) => {

  switch (action.type) {
      case LOGIN:

        console.log("login");

         return state;

      case LOGOUT:
         //...
         return state;

      default:
      console.log("default");
         return state;
   }
};

const rootReducer = combineReducers({
   userLogin
});

export default rootReducer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './containers/App'
import rootReducer from './reducers/rootReducer'

let storelogin = createStore(rootReducer);
let rootElement2 = document.getElementById('root');
console.log("index");
ReactDOM.render(
   <Provider store={storelogin}>
      <App />
   </Provider>,
   rootElement2
);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Soundcloud Client</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="counter"></div>
    <div id="root"></div>
    <div id="hellouni"></div>
  </body>
</html>

当构建 OK，但运行 localhost:8080 然后我得到错误：未捕获的 ReferenceError：未定义渲染

有人帮帮我吗？

【问题讨论】：

你有什么版本的 react-dom ？

标签： reactjs redux

【解决方案1】：

你也应该导入 React 本身。

import React, { Component } from 'react'

【讨论】：

谢谢，我想念 App.js 和 LoginForm.js 的 React，但我不知道为什么要添加 React，我只使用组件应该我认为添加组件
欢迎您。 :) 正如 Dan 所说：JSX 希望 React 在范围内。 discuss.reactjs.org/t/es6-import-as-react-vs-import-react/360/3
当构建一切正常，但点击按钮登录错误生成“app.js:31819 Uncaught TypeError: dispatch is not a function”，代码错误？