Question

您好，我正在尝试为自己的应用创建自己的登录屏幕，并收到此错误。

该错误位于：

在登录中（在App.js：12）

这是我的Login.js：

import React, { Component } from "react";
import { View, Text } from "react-native";
import { Header, Card, CardSection, Input, Button, Spinner } from "../components";
import PasswordTextInput from "../components/PasswordTextInput";

class Login extends Component {
  state = { email: "", password: "", error: "", loading: false };

  onButtonPress() {
    const { email, password } = this.state;
    if (email.length === 0 || password.length === 0) {
      this.setState({
        error: "Please enter valid credential",
        loading: false
      })
    }
    else {
      this.setState({ error: "", loading: true });
    }
  }

  onLoginFail() {
    this.setState({
      error: "Authentication Failed",
      loading: false
    });
  }

  onLoginSuccess() {
    this.setState({
      email: "",
      password: "",
      loading: false,
      error: ""
    });
  }

  renderButton() {
    if (this.state.loading) {
      return <Spinner size="small" />;
    }

    return <Button onPress={this.onButtonPress.bind(this)}>Log in</Button>;
  }

  renderError() {
    if (this.state.error.length > 0) {
      return <Text style={styles.errorStyle}>{this.state.error}</Text>
    }
  }

  render() {
    return (
      <View>
        <Header title="Login" />

        <Card>
          <CardSection>
            <Input
              placeholder="Enter Email"
              label="Email"
              value={this.state.email}
              onChangeText={email => this.setState({ email })}
            />
          </CardSection>

          <CardSection>
            <PasswordTextInput
              placeholder="Enter Password"
              label="Password"
              value={this.state.password}
              onChangeText={password => this.setState({ password })}
            />
          </CardSection>

          {this.state.error.length > 0 && <Text style={styles.errorStyle}>{this.state.error}</Text>}

          <CardSection>{this.renderButton()}</CardSection>
        </Card>
      </View>
    );
  }
}

const styles = {
  errorStyle: {
    fontSize: 18,
    alignSelf: "center",
    color: "red",
    padding: 5
  }
};

export default Login;

这是我的App.js：

import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import Login from './src/pages/Login';

export default class App extends Component {

  render() {
    return (
      <Login />
    );
  }

}

AppRegistry.registerComponent('App', () => App);

我已经阅读了有关类似问题的一些解决方案，据说我正在调用一个函数，该函数反复调用另一个函数，因此达到了极限。

Maximum call stack size exceeded error

您能否浏览一下我的代码，并告诉我对Login.js文件进行什么更改？

Answer 1

请参阅https://stackoverflow.com/a/6095695/5393314

“这意味着您正在代码中的某个位置调用一个函数，该函数依次调用另一个函数，依此类推，直到达到调用堆栈限制为止。

这几乎总是因为没有满足基本情况的递归函数。”

因此，如果您尝试一小部分地中断功能，以验证在代码的特定位置不会超出堆栈的范围。

Answer 2

我要扔一个三元组，看看它是否进入：

我认为您遇到的问题如下：在Input和PasswordTextInput中，您在onChangeText方法中编写的不正确。这是可行的，但是除了在修改文本时执行此操作之外，在呈现组件后也会立即执行。

除此之外，每次更改文本时都会修改状态（很好），但是每当更改状态时都会执行render方法。由于该标记具有一个value方法，每次执行render方法时都会赋予它值，因此更改该值会导致该onChangeText方法通过再次更改状态而执行，从而带来了问题。

一旦执行了render方法，则onChangeText一开始就被执行，就会出现错误。

解决方案：将输入更改为：

<Input
        placeholder="Enter Email"
        label="Email"
        onChangeText={(email) => {
          this.setState({ email })
        }}
      />


 <PasswordTextInput
        placeholder="Enter Password"
        label="Password"
        onChangeText={(password) => {
          this.setState({ password })
        }}
      />

祝你好运^^

是什么导致我的代码中出现“ RangeError：超出最大调用堆栈大小”？

2 个答案: