Question

我的登录组件：

import React, { Component } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity
} from 'react-native'

export class Login extends Component {
  onChangeText = (key, value) => {
    this.props.setUserDetails({
     ...this.props.user,
     [key]: value
    })
 }

  render() {
    const { user, onSubmitForm } = this.props
    console.log(this.props.user) //  user undefined here
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>Login</Text>
        <TextInput
          placeholder='Email'
          onChangeText={val => this.onChangeText('email', val)}
          style={styles.input}
          value={user.email}
        />
        <TextInput
          placeholder='Password'
          onChangeText={val => this.onChangeText('password', val)}
          style={styles.input}
          value={user.password}
        />
        <TouchableOpacity onPress={() => onSubmitForm(user)}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Submit</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

我的登录容器：

import React, { Component } from 'react'
import { setUserDetails } from '../actions/loginActions'
import { connect } from 'react-redux'
import loginReducer from '../reducers/loginReducer'
import { Login } from '../components/login'

export class LoginContainer extends Component {

  onSubmitForm = () => {
    // Checking Validations 
    const { name, email } = this.props;
    if (!name || !email) {
      alert('Please fill the form')
      console.log(this.props.user) // It says undefined
      return;
    }
  }

  render () {
    return (
      <Login
        user={this.props.user}
        setUserDetails={this.props.setUserDetails}
        onSubmitForm={this.onSubmitForm}
      />
    )
  }
}

const mapStateToProps = (state) => ({
  user: state.loginReducer.user,
})

const mapDispatchToProps = dispatch => ({
  setUserDetails: payload => dispatch(setUserDetails(payload)),
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)

我的登录还原器：

const initialState = {
  user: {
    email: '',
    password: '',
  }
}

const loginReducer = (state = initialState, action) => {
  switch(action.type) {
    case SET_USER_DETAILS:
      return Object.assign({}, state, {
        user: action.user
      })
    default:
      return state
  }
  return state
}

export default loginReducer

我的root Reducer：

import { combineReducers } from 'redux';
import loginReducer from './loginReducer'
const rootReducer = combineReducers({
  loginReducer
})

export default rootReducer

我的商店配置：

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from './reducers'

const persistConfig = {
  key: 'mykey',
  storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer)
const persistedStore = persistStore(store)

export default store

我正在学习React native并尝试实现一些功能。问题是调用提交时，我只是无法在Login容器中访问我的this.props.user。在这种情况下我想念什么？任何帮助表示赞赏。

Answer 1

我注意到了一些奇怪的事情。您的默认导出LoginContainer.js已连接Login组件。我想你真正的意思不是这个：

// ...imports

export class LoginContainer extends Component { 
  // ...
}

//...

export default connect(mapStateToProps, mapDispatchToProps)(Login)

使用此：

// ...imports

// no need to 'export class ...' here.
class LoginContainer extends Component { 
  // ...
}

// ...

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Answer 2

在您使用的容器中：

const mapStateToProps = (state) => ({
    user: state.loginReducer.user,
})

但是在您的初始状态下没有loginReducer。 Maibe可以正常工作：

const mapStateToProps = (state) => ({
    user: state.user
})

无法访问容器中的减速器状态

2 个答案: