loops - React-Native:不变违规:超过最大更新深度
问题描述
我有以下登录屏幕,在更新react-native
到之前0.60.4
它工作正常。
interface OwnProps {
navigation: any
}
interface StateProps {
isLoggedIn: boolean,
isAuthenticating: boolean
}
interface DispatchProps {
actions: {
auth: {
authenticate: (username: string, password: string) => Promise<void>
}
}
}
type Props = OwnProps & StateProps & DispatchProps
interface State {
username: string,
password: string,
error?: string,
fadeAnim: Animated.Value
}
class LoginScreen extends Component<Props, State> {
static propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
isAuthenticating: PropTypes.bool.isRequired,
actions: PropTypes.shape({
auth: PropTypes.object
})
}
state: State = {
username: '',
password: '',
error: null,
fadeAnim: new Animated.Value(1)
}
keyboardDidShowListener: EmitterSubscription
keyboardDidHideListener: EmitterSubscription
constructor(props) {
super(props)
this._onLogin = this._onLogin.bind(this)
this._handleUsernameChange = this._handleUsernameChange.bind(this)
this._handlePasswordChange = this._handlePasswordChange.bind(this)
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow)
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
}
componentWillUnmount(): void {
this.setState({
username: '',
password: null,
error: null,
fadeAnim: new Animated.Value(1)
})
this.keyboardDidShowListener.remove()
this.keyboardDidHideListener.remove()
}
_keyboardDidShow = (): void => {
Animated.timing(
this.state.fadeAnim,
{
toValue: 0,
duration: 500
}
).start()
}
_keyboardDidHide = (): void => {
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 500
}
).start()
}
_onLogin = (): void => {
dismissKeyboard()
if (this.isFormValid()) {
this.props.actions.auth.authenticate(this.state.username, this.state.password)
.catch((error: Error) => {
const message: string = error ? error.message : 'Si e\' verificato un errore.'
this.setState({ error: message })
Toast.error(error.message)
})
}
}
isFormValid(): boolean {
this.setState({ error: null })
if (!this.state.username || this.state.username === '') {
this.setState({ error: 'Username non valido.' })
Toast.error('Username non valido.')
return false
}
if (!this.state.password || this.state.password === '') {
this.setState({ error: 'Password non valida.' })
Toast.error('Password non valida.')
return false
}
return true
}
_handleUsernameChange = (username: string) => {
this.setState({ username })
}
_handlePasswordChange = (password: string) => {
this.setState({ password })
}
render(): JSX.Element {
const { fadeAnim } = this.state
return (
<Content
padder
style={styles.content}
contentContainerStyle={styles.contentContainer}
keyboardShouldPersistTaps='always'
keyboardDismissMode='on-drag'
>
<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.contentContainer}>
<Spinner visible={this.props.isAuthenticating} textContent={'Accesso in corso...'} textStyle={{color: 'white'}} />
<Animated.View style={[styles.logosContainer, { opacity: fadeAnim }]}>
<Image
style={styles.logo}
source={require('../../assets/logo.png')}
/>
</Animated.View>
<Form style={styles.form}>
<Item floatingLabel error={this.state.error ? true : false}>
<Label>Username</Label>
<Input
autoCapitalize='none'
autoCorrect={false}
value={this.state.username}
onChangeText={this._handleUsernameChange}
/>
</Item>
<Item floatingLabel error={this.state.error ? true : false}>
<Label>Password</Label>
<Input
autoCapitalize='none'
autoCorrect={false}
secureTextEntry
value={this.state.password}
onChangeText={this._handlePasswordChange}
/>
</Item>
</Form>
{/*this.state.error ? (<FormMessage message={this.state.error} />) : null*/}
<Button block success style={styles.loginButton} onPress={this._onLogin}>
<Text>Accedi</Text>
</Button>
</View>
</TouchableWithoutFeedback>
</Content>
)
}
}
[...]
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
更新后,当我尝试输入用户名或密码时,会抛出以下预期:
不变违规:超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。React 限制了嵌套更新的数量以防止无限循环。
我在这里阅读了很多关于堆栈溢出和互联网的问题,但似乎没有任何问题可以解决问题。
有人可以帮我吗?
解决方案
不知道为什么,但升级到最新react-navigation
版本后一切正常。
推荐阅读
- postgresql-9.5 - 在几分钟内未显示正确的增量
- html - 位置:固定在 chrome/firefox 移动模型(和移动)上不起作用,但在我调整窗口大小时起作用
- laravel - 更改 InertiaJS-Laravel 默认的 RootView
- php - FEDEX 跟踪 API 错误消息:'您请求的资源不再可用。请修改您的请求,然后重试。
- c# - ASP.NET MVC Web 应用程序部署到 heroku
- entity-framework-core - 使用实体框架删除多行
- mqtt - 使用 caddy 2 的反向代理 websocket (paho)
- puppeteer-sharp - 我无法单击 Power BI 中的任何按钮
- latitude-longitude - 将经纬度四舍五入到大约 500 米以内
- javascript - 如何根据 React 和 JS 中的内容更改颜色文本