Javascript 还原程序未更新状态

我正在尝试使用

react redux

更新应用程序状态，但该状态未被更新

下面是我的reducers.js:

import * as Actions from '../actions/index';

const initialState = {
  user: {},
  authSuccess: false,
  authError: {},
};

function Auth(state = initialState , action) {
    switch(action.type) {
      case Actions.SIGN_UP_SUCCESS:
           console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      case Actions.AUTHENTICATION_FAILED:
          console.log(action.error); // Is being logged and its not undefined
          return {
              authError: action.error,
              ...state
          };
      case Actions.LOGIN_SUCCESS:
          console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      default:
          return state;
  }
}

export default Auth;

import React, { Component } from 'react';
import {Text, View, StyleSheet, ImageBackground, Image, TextInput} from 'react-native';
import { Button } from 'react-native-elements'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as Actions from '../actions/index';
import { styles } from './SignUp';

const textInputConfig = {
  placeholderTextColor : '#838383',
}


function mapStateToProps(state) {
    return {
      user: state.user,
      authSuccess: state.authSuccess,
      authError: state.authError,
    };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(Actions, dispatch);
}

class Login extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  static navigationOptions = {
      header: null,
  };


  login = () => {
      let user = {
         email: this.state.email,
         password: this.state.password,
      };
      this.props.login(user);
  };


  render() {
    console.log(this.props.authError.user +" "+this.props.authSuccess);// Always undefined and false, even after the actions are dispatched.
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <Image source={require('../resources/images/app_logo.png')} style={styles.logo}/>
              <View style={styles.formContainer}>
                  <TextInput style={styles.textInput} placeholder='Email'
                      placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({email:text})} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Password'
                      secureTextEntry={true} placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({password:text})} autoCapitalize='none'/>
                  <Button raised title='LOG IN' buttonStyle={styles.signupButton}
                      containerViewStyle={styles.signupButtonContainer} onPress={this.login} />
             </View>
        </ImageBackground>
      </View>
    );
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Login);

下面是我的login.js:

import * as Actions from '../actions/index';

const initialState = {
  user: {},
  authSuccess: false,
  authError: {},
};

function Auth(state = initialState , action) {
    switch(action.type) {
      case Actions.SIGN_UP_SUCCESS:
           console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      case Actions.AUTHENTICATION_FAILED:
          console.log(action.error); // Is being logged and its not undefined
          return {
              authError: action.error,
              ...state
          };
      case Actions.LOGIN_SUCCESS:
          console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      default:
          return state;
  }
}

export default Auth;

import React, { Component } from 'react';
import {Text, View, StyleSheet, ImageBackground, Image, TextInput} from 'react-native';
import { Button } from 'react-native-elements'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as Actions from '../actions/index';
import { styles } from './SignUp';

const textInputConfig = {
  placeholderTextColor : '#838383',
}


function mapStateToProps(state) {
    return {
      user: state.user,
      authSuccess: state.authSuccess,
      authError: state.authError,
    };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(Actions, dispatch);
}

class Login extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  static navigationOptions = {
      header: null,
  };


  login = () => {
      let user = {
         email: this.state.email,
         password: this.state.password,
      };
      this.props.login(user);
  };


  render() {
    console.log(this.props.authError.user +" "+this.props.authSuccess);// Always undefined and false, even after the actions are dispatched.
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <Image source={require('../resources/images/app_logo.png')} style={styles.logo}/>
              <View style={styles.formContainer}>
                  <TextInput style={styles.textInput} placeholder='Email'
                      placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({email:text})} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Password'
                      secureTextEntry={true} placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({password:text})} autoCapitalize='none'/>
                  <Button raised title='LOG IN' buttonStyle={styles.signupButton}
                      containerViewStyle={styles.signupButtonContainer} onPress={this.login} />
             </View>
        </ImageBackground>
      </View>
    );
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Login);

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，ImageBackground，Image，TextInput}；
从“反应本机元素”导入{Button}
从“redux”导入{bindActionCreators}；
从'react redux'导入{connect}；
从“../Actions/index”导入*作为操作；
从“./SignUp”导入{style}；
常量textInputConfig={
占位符文本颜色：'#838383'，
}
函数MapStateTops（状态）{
返回{
用户：state.user，
authSuccess:state.authSuccess，
authError:state.authError，
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（操作、分派）；
}
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
};
}
静态导航选项={
标题：null，
};
登录=（）=>{
让用户={
电子邮件：this.state.email，
密码：this.state.password，
};
this.props.login（用户）；
};
render（）{
console.log（this.props.authError.user+“”+this.props.authSuccess）；//始终未定义且为false，即使在调度操作之后也是如此。
返回(
this.setState（{email:text}）autoCapitalize='none'/>
this.setState（{password:text}）autoCapitalize='none'/>
);
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（登录）；

---

但正如您所看到的，我的组件中没有更新状态，有人能告诉我哪里出了问题吗？

如下交换…状态和其他状态

return {
    ...state
    user: action.user,
    authSuccess: true
};

return {
    user: "some_user",
    ...state
}

return {
    ...state,
    user: "some_user"
}

扩展运算符的思想是，它将扩展所有属性

因此，如果该州已经有一个名为

user

（比如“old_user”）的属性，您可以按如下方式编写它

return {
    ...state
    user: action.user,
    authSuccess: true
};

return {
    user: "some_user",
    ...state
}

return {
    ...state,
    user: "some_user"
}

然后“某些用户”将替换为“旧用户”。但是您想用“some_user”覆盖“old_user”，因此，您必须按如下方式交换它

return {
    ...state
    user: action.user,
    authSuccess: true
};

return {
    user: "some_user",
    ...state
}

return {
    ...state,
    user: "some_user"
}

---

一切看起来都很好。我找不到错误。你能仔细检查一下MapStateTops吗

    function mapStateToProps(state) {
        console.log(state)
        return {
          user: state.user,
          authSuccess: state.authSuccess,
          authError: state.authError,
        };
    }

---

你的回答真让人困惑我像你说的那样改变了这个州，但它仍然不起作用