0
私はreduxから状態を受け取る反応コンポーネントを持っています。コンポーネントの状態をcomponentWillReceivePropsで更新する
私は3つのアクション{SIGNIN_REQUEST、SIGNIN_FAILURE、SIGNIN_SUCCESS}を持っています。
SIGNIN_FAILUREアクションが呼び出されると、これはエラーステータスを変更:
私は私のコンポーネントでこの機能を持っている:
componentWillReceiveProps(nextProps) {
if (nextProps.errors != '') {
this.setState({
message: nextProps.errors,
});
}
}
私はコンポーネントが新しい小道具を受信したときに、これは変更されることを期待メッセージの状態...しかし、動作しません。
提案がありますか?
更新:私の期待どおりのonPressLoginはどちらも動作しません。
マイコンポーネント:
import React, {
PropTypes,
Component,
StyleSheet,
View,
Text,
ScrollView,
TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import { Picker } from 'react-native-prefix-picker';
import Notification from 'react-native-notification';
import { signIn, signInGuest } from '../actions/SignInActions';
// other import
const styles = StyleSheet.create({
scroll: {
paddingLeft: 16,
paddingRight: 16,
},
});
class SignIn extends Component {
static propTypes = {
isConnected: PropTypes.bool,
isWaiting: PropTypes.bool,
errors: PropTypes.string,
dispatch: PropTypes.func,
}
constructor(props) {
super(props);
this.state = {
prefix: '',
phone: '',
password: '',
message: '',
errorInputT: '',
};
this.onPressGuest = this.onPressGuest.bind(this);
this.onPressLogin = this.onPressLogin.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors != '') {
this.setState({
message: nextProps.errors,
});
}
}
onPressLogin() {
if (!this.props.isConnected) {
this.setState({
message: 'Network error',
});
return;
}
const prefix = this.state.prefix;
const phone = prefix + this.state.phone;
const password = this.state.password;
this.props.dispatch(signIn(phone, password));
}
render() {
return (
// ...
);
}
}
const mapStateToProps = (state) => {
return {
errors: state.signIn.errors,
isWaiting: state.signIn.isWaiting,
isConnected: state.network.isConnected,
}
};
export default connect(mapStateToProps)(SignIn);
通知コンポーネント:私のコンポーネント通知に
import React, {
Component,
StyleSheet,
PropTypes,
Text,
Animated,
Dimensions,
} from 'react-native';
const Screen = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 35,
width: Screen.width - 80,
left: 40,
right: 40,
backgroundColor: '#444',
alignItems: 'center',
padding: 6,
borderRadius: 12,
shadowColor: '#000',
shadowOpacity: 0.5,
shadowRadius: 1,
shadowOffset: {
width: 0,
height: 1,
},
},
message: {
color: '#fff',
fontSize: 12,
textAlign: 'center',
},
});
const propTypes = {
fadeTime: PropTypes.number,
minOpacity: PropTypes.number,
maxOpacity: PropTypes.number,
message: PropTypes.string,
};
const defaultProps = {
fadeTime: 500,
minOpacity: 0.0,
maxOpacity: 0.9,
message: '',
};
class Notification extends Component {
constructor(props) {
super(props);
this.state = {
opacityValue: new Animated.Value(this.props.minOpacity),
};
}
shouldComponentUpdate() {
if (this.props.message != '') {
return true;
}
return false;
}
componentWillReceiveProps() {
this.fadeIn();
setTimeout(() => {
this.fadeOut();
}, 3000);
}
fadeIn =() => {
Animated.timing(this.state.opacityValue, {
duration: this.props.fadeTime,
toValue: this.props.maxOpacity,
}).start();
}
fadeOut =() => {
Animated.timing(this.state.opacityValue, {
duration: this.props.fadeTime,
toValue: this.props.minOpacity,
}).start();
}
render() {
if (this.props.message === '') {
return null;
}
return (
<Animated.View style={[styles.container, { opacity: this.state.opacityValue }]}>
<Text style={styles.message}>{this.props.message}</Text>
</Animated.View>
);
}
}
Notification.propTypes = propTypes;
Notification.defaultProps = defaultProps;
export default Notification;
コンポーネント全体を投稿できますか? – QoP
あなたが掲示したコードスニペットから、 'componentWillReceiveProps'は呼び出されません。' nextProps.errors == '' 'または新しいpropsとnew stateは、コンポーネントが変更されていないと考えて、レンダリングを実行させます。 DOMを更新しないようにします。 'componentWillReceiveProps()'の中の 'console.log(nextProps.errors)'は、あなたの問題の原因であるかどうかを判断するのに役立ちます。 – wintvelt
console.log( 'LOG Message'、this.state.message)を追加しました。内部render()と私は新しい状態を表示します。だから問題は新しい小道具で更新しないコンポーネントの通知です。 – SaroVin