終極版-陣營：身份驗證 - 渲染沒有定義

我有一些代碼遵循計算器例子，併產生錯誤，但我不知道固定，有人幫助我

動作/ 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;

容器/ A pp.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);

減速/ 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>

當構建好，但本地主機上運行： 8080然後我收到錯誤： Uncaught ReferenceError：渲染未定義

有人幫我嗎？

來源

2016-09-27 Hieu Bui

你有什麼版本的react-dom？ – Devnegikec

您應該導入React本身。

import React, { Component } from 'react'

來源

2016-09-27 10:26:46 Garrett

謝謝，我錯過了React在App.js和LoginForm.js，但我不知道爲什麼添加反應，我只使用組件應該我想添加組件 –

歡迎您。 :) 丹說：_JSX想React在範圍內._ https://discuss.reactjs.org/t/es6-import-as-react-vs-import-react/360/3 – Garrett

當建立所有萬物確定，但單擊按鈕登錄錯誤生成「app.js：31819 Uncaught TypeError：調度不是函數」，代碼是錯誤的？ –

終極版-陣營：身份驗證 - 渲染沒有定義

回答

相關問題