Question

在文本字段中输入值时，获取最大更新深度超出错误。这是我的组成部分。如果我删除onChangeText事件，则不会抛出错误，因此问题出在事件上。

这些是当前正在使用的依赖项
   反应：16.8.6，
   react-dom：16.8.6，
   react-native：https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz，

   import { Form, View, Text, Button, Item, Input, Label, Toast, Spinner } from "native-base";
import React from "react";
import { validatePin } from "../services/validate";

export default class LoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { userid: "", loading: "false" };
    }

    async login() {
        if (this.state.userid.length == 0) {
            Toast.show({
                text: "Wrong UserID!",
                buttonText: "Okay",
                textStyle: { color: "yellow" }
            });
        } else {
            if(this.state.loading === "false" ){
                this.setState({ loading: "true" });
            }           
            try {
                let res = await validatePin(this.state.userid);
                if (typeof res != "undefined") {
                    const { navigate } = this.props.navigation;
                    this.setState({ loading: "false" });
                    if (res.bypassMFA) {
                        navigate("Password", {
                            user_id: this.state.userid,
                            member_name: res.member_name
                        });
                    } else {
                        navigate("MFAComponent", {
                            userid: this.state.userid,
                            mfa_id: res.mfa_id,
                            mfa_q: res.mfa_q,
                            isValidUser: res.isValidUser
                        });
                    }
                }
            } catch (err) {
                console.log("error in login:" + err);
            }
        }
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Form style={{ padding: 5, alignItems: "center" }}>
                    <Item floatingLabel>
                        <Label>Online ID</Label>
                        <Input 
                            value={this.state.userid}
                            onChangeText={username => this.setState({ userid: username })}
                        />
                    </Item>

                    {this.state.loading == "true" ? (
                        <View>
                            <Spinner size="large" color="#c137a2" />
                        </View>
                    ) : null}
                    <Button primary onPress={this.login} style={{ alignSelf: "center", margin: 20 }}>
                        <Text> Next </Text>
                    </Button>


                </Form>
            </View>
        );
    }
}

Answer 1

首先，您没有为onPress绑定login函数。您的onPress道具应如下所示：

onPress={() => this.login}

或在构造函数中的bind方法：

this.login.bind(this)

React Native：最大更新深度超出错误

1 个答案: