Question

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

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

动作/ 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);

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

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

有人帮帮我吗？

Answer 1

你也应该自己导入React。

import React, { Component } from 'react'

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

1 个答案: