React Redux未在mapStateToProps中获得状态

Question

我正在尝试通过react redux使用户登录我的应用程序，但由于

TypeError：未定义不是对象（正在评估“ state.user_name”）

app.js

 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import AppDrawer from './drawerNavigator.js'; import MainNavigator from './screens/stackNavigator' import { createStore } from 'redux' import { Provider } from 'react-redux' initialState = { first_name:"", last_name: "", user_name: "", password: "", } const reducer = (state = initialState, action) =>{ switch (action.type) { case 'SIGN_UP': return {first_name: state.first_name = action.payload.first_name} {last_name: state.last_name = action.payload.last_name} {user_name: state.user_name = action.payload.user_name} {password: state.password = action.payload.password} console.log("signUp"); case 'LOG_IN': return JSON.stringify(action.payload); } return state } const store = createStore(reducer); export default class App extends React.Component { constructor(props){ super(props); } render() { return ( <> <Provider store={store}> < MainNavigator/> </Provider> </> ); } } 

Login.js

 import React from 'react'; import { StyleSheet, Text, View, Button, TextInput, Image, TouchableHighlight } from 'react-native'; import { connect } from 'react-redux'; import axios from 'axios'; import { NavigationActions } from 'react-navigation'; import { Actions } from 'react-native-router-flux'; class LogIn extends React.Component { state = { user: "", pwd: "", } render(){ const navigation = this.props.navigation; return( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="User Name" underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({user: text})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({pwd: text})}/> </View> <View style={styles.btn}> <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress = {()=>this.props.logIn(this.state)}> <Text style={styles.loginText}>Login</Text> </TouchableHighlight> <TouchableHighlight style={styles.buttonContainer}> <Text>Forgot your password?</Text> </TouchableHighlight> <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress = {()=>navigation.navigate('SignUp')}> <Text>Register here</Text> </TouchableHighlight> </View> </View> ); } } const mapStateToProps = (state) =>{ return { user_name: state.user_name, password: state.password } } const mapDispatchToProps = (dispatch,ownProps) =>{ return{ logIn: (text) => { if(text.user == ""){ alert("Enter user name"); } else if(text.pwd == ""){ alert("Enter Password"); } else { var body = {email: text.user,password: text.pwd} console.log("body",body); axios.post('http://user/login',body) .then(res=>{ console.log("res",res); dispatch({ type: 'LOG_IN',payload: res}); ownProps.navigation.navigate('AppDrawer'); },err=>{ alert(err); }) } } } } export default connect(mapStateToProps,mapDispatchToProps)(LogIn) 

signUp.js

 import React from 'react'; import { StyleSheet, Text, View, Button, TextInput, Picker, TouchableOpacity, Image, ScrollView, TouchableHighlight } from 'react-native'; import { AppRegistry } from "react-native"; import { connect } from 'react-redux'; import axios from 'axios'; class SignUp extends React.Component { state = { first_name:"", last_name: "", user_name: "", password: "", } render() { return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="First Name" underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({first_name: text})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Last Name" keyboardType="email-address" underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({last_name: text})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="User Name" underlineColorAndroid='transparent' onChangeText={(text)=>this.setState({user_name: text})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Password" underlineColorAndroid='transparent' secureTextEntry={true} onChangeText={(text)=>this.setState({password: text})}/> </View> <View style={styles.btn}> <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={()=>this.props.signUp(this.state)}> <Text style={styles.loginText}>Register</Text> </TouchableHighlight> </View> </View> ); } } function mapStateToProps (state){ return { first_name: state.first_name, last_name: state.last_name, user_name: state.user_name, password: state.password, } } function mapDispatchToProps(dispatch,ownProps){ return{ signUp: (text) => { if (text.first_name=="") { alert("Enter First Name"); } else if(text.last_name == ""){ alert("Enter Last Name"); } else if(text.password == ""){ alert("Enter Password"); } else if(text.user_name == ""){ alert("Enter User_name"); } else { var body = {first_name: text.first_name,last_name: text.last_name,user_name: text.user_name,password: text.password} console.log("body",body); axios.post('http://user/signup',body) .then(res=>{ dispatch({ type: 'SIGN_UP', payload: body}) console.log({msg: 'added'}); ownProps.navigation.navigate('Login') },err=>{ alert(err); }) } } } } export default connect(mapStateToProps,mapDispatchToProps)(SignUp) 

错误位于mapStateToProps（）方法中的Login.js上，我在App.js中的状态为user_name，但未在Login.js中呈现

Answer 1

您在这里遇到特定错误。 JS将在下面评估代码

case 'SIGN_UP':
return
  {first_name: state.first_name = action.payload.first_name}        
  ...

如

case 'SIGN_UP':
return undefined;
  {first_name: state.first_name = action.payload.first_name}
  ...

这是现场示例

 const testReturn = () => { return { a: 2 } } console.log(testReturn()) 

虽然正确放置符号{

 const testReturn = () => { return { a: 2 } } console.log(testReturn()) 

您在LOG_IN案中LOG_IN的相同问题

return
   JSON.stringify(action.payload)

Answer 2

您的减速器应该看起来像这样

const reducer = (state = initialState, action) =>{  
  switch (action.type) {
    case 'SIGN_UP':
      return { ...action.payload };
    case 'LOG_IN':
      return JSON.stringify(action.payload);
    default:
      return state;
  }
}

并使用分号结尾的语句会在某些情况下造成问题。