React Native - mapStateToPropsが呼び出されましたが、再レンダリングされませんでした。

Question

私はReact Native/Reduxの開発を2週間開始しましたが、mapStateToPropsと再レンダリングにいくつか問題があります。ここで

は事実である：

• mapStateToPropsは、右の状態（新品）で正しく呼び出され
• 私はすでにのトラブルシューティングのページをチェックしている
• mapStateToProps後に関数が呼び出されていないレンダリング
  ：それについて、私は可変問題ここ

を持っていけないReduxのコードですの

コンポーネント

import React from 'react'; 
import { connect } from 'react-redux'; 
import { View, StyleSheet } from 'react-native'; 
import { Item, Input, Button, Text } from 'native-base'; 
import { signup } from './../actions/signup.action'; 

class Signup extends React.Component { 

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

    render() { 
     console.log('rendering', this.props); 

     return (
      <View style={styles.container}> 
       <Item rounded> 
        <Input placeholder='Email' onChangeText={(text) => this.setState({email: text})} value={this.state.email} /> 
       </Item> 
       <Item rounded> 
        <Input placeholder='Mot de passe' secureTextEntry={true} onChangeText={(text) => this.setState({password: text})} value={this.state.password} /> 
       </Item> 
       <Item rounded> 
        <Input placeholder='Confirmation du mot de passe' secureTextEntry={true} onChangeText={(text) => this.setState({confirmPassword: text})} value={this.state.confirmPassword} /> 
       </Item> 
       <Button rounded onPress={(e) => this.onSignup(this.state.email, this.state.password)}> 
        <Text>Créer un compte</Text> 
       </Button> 

       <Text>{this.props.isSignupLoading}</Text> 

       <Text>{this.props.signupError}</Text> 
      </View> 
     ) 
    } 

    onSignup = (email, password) => { 
     this.props.signup(email, password); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     isSignupLoading: state.isSignupLoading, 
     isSignupSuccess: state.isSignupSuccess, 
     signupError: state.signupError 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     signup: (email, password) => dispatch(signup(email, password)) 
    }; 
}; 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: "center", 
     alignItems: "center", 
     backgroundColor: "#F5FCFF", 
    }, 
}); 

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

アクション

import { firebaseAuth } from './../config/firebase'; 

export const signupLoading = (isSignupLoading) => { 
    return { 
     type: 'SIGNUP_LOADING', 
     isSignupLoading 
    }; 
} 

export const signupSuccess = (isSignupSuccess) => { 
    return { 
     type: 'SIGNUP_SUCCESS', 
     isSignupSuccess 
    }; 
}; 

export const signupError = (error) => { 
    return { 
     type: 'SIGNUP_ERROR', 
     signupError: error.message 
    }; 
}; 

export const signup = (email, password) => { 
    return (dispatch) => { 
     dispatch(signupLoading(true)); 
     firebaseAuth.createUserWithEmailAndPassword(email, password) 
      .then(() => dispatch(signupLoading(false))) 
      .then(() => { 
       console.log("signup.action#signup success"); 
       dispatch(signupSuccess(true)); 
      }) 
      .catch((error) => { 
       console.log("signup.action#signup failed - " + error); 
       dispatch(signupLoading(false)); 
       dispatch(signupError(error)); 
      }); 
    }; 
}; 

リデューサー

const defaultState = { 
    isSignupLoading: false, 
    isSignupSuccess: false, 
    signupError: null 
}; 

const signupReducer = (state = defaultState, action) => { 
    switch (action.type) { 
     case 'SIGNUP_LOADING': 
      return Object.assign({}, state, { 
       isSignupLoading: action.isSignupLoading 
      }); 
     case 'SIGNUP_SUCCESS': 
      return Object.assign({}, state, { 
       isSignupSuccess: action.isSignupSuccess 
      }); 
     case 'SIGNUP_ERROR': 
      return Object.assign({}, state, { 
       signupError: action.signupError 
      }); 
     default: 
      return state; 
    } 
} 

export default signupReducer; 

あなたは私がやっていることについてのより多くのコードが必要な場合は、私に尋ねます。

ありがとうございました。 よろしくお願いいたします。

Answer 1

Reactアプリケーションを初めて構築するときに、この問題が発生したと思います。

あなたは、コンポーネントが再レンダリングされておらず、既にレンダリングされていると言います。その場合、mapStateToPropsはコンポーネントpropsを初期化しますが、私の理解は、状態が変わったときに小道具値を変更しないことです。

代わりに、componentWillReceivePropsライフサイクルメソッドを使用して、新しいプロップ値でコンポーネントの状態を更新する必要があります。