Question

我是React Native的初学者，我试图通过使用状态和功能来检查测验的应用程序，以根据给定的单词检查所按下的按钮是否正确。但是，我收到有关不变式违反的错误：超出最大更新深度，这可能是由于我使用onPress的方式造成的吗？

import React, {Component} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  TouchableOpacity,
  Image,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {color} from 'react-native-reanimated';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

const styles = StyleSheet.create({
  progressbar: {
    width: 218,
    height: 24,
    borderRadius: 12,
    borderColor: 'grey',
    borderWidth: 1,
    marginTop: 70,
    paddingRight: 79,
    paddingLeft: 79,
  },
  words: {
    fontFamily: 'Arial',
    fontSize: 85,
    fontWeight: 'bold',
  },
  image: {width: 345, height: 391, borderRadius: 50, marginTop: 31},
  button: {width: 100, height: 80, borderRadius: 29, marginHorizontal: 5},
});

export default class quizC extends React.Component {
  state = {
    progress: 0,
    progressbar: 0,
    progressbarwidth: 0,
    words: '',
    imagesource: '',
    option: 0,
    option1: '',
    option2: '',
    option3: '',
    correctoption: 0,
    score: 0,
  };
  _updateProgress() {
    switch (this.state.imagesource) {
      case 1:
        this.setState({words: 'c_t'});
        this.setState({progressbarwidth: 109});
        this.setState({correctoption: 2});
        this.setState({option1: 'c'});
        this.setState({option2: 'a'});
        this.setState({option3: 't'});
        //return cat
        break;

      case 2:
        this.setState({words: 'do_'});
        this.setState({progressbarwidth: 218});
        this.setState({correctoption: 3});
        this.setState({option1: 'd'});
        this.setState({option2: 'o'});
        this.setState({option3: 'g'});
        //return dog
        break;
    }
  }

  _checkcorrectans() {
    if (this.state.option == this.state.correctoption) {
      this.setState(prevState => ({progress: prevState.progress + 1}));
      this.setState(prevState => ({score: prevState.score + 1}));
      this.setState({imagesource: this.state.progress});
    } else {
      this.setState(prevState => ({progress: prevState.progress + 1}));
      this.setState({imagesource: this.state.progress});
    }
  }
  option1() {
    this.setState({option: 1});
    this._checkcorrectans();
    this._updateProgress();
  }

  option2() {
    this.setState({option: 2});
    this._checkcorrectans();
    this._updateProgress();
  }

  option3() {
    this.setState({option: 3});
    this._checkcorrectans();
    this._updateProgress();
  }

  render() {
    return (
      <SafeAreaView>
        <View style={styles.progressbar}>
          <View
            style={{
              height: 24,
              borderRadius: 12,
              backgroundColor: 'green',
              width: this.state.progressbarwidth,
            }}
          />
        </View>
        <View style={{alignItems: 'center', marginTop: 12}}>
          <Text style={styles.words}>{this.state.words}</Text>
        </View>
        <View style={styles.image}>
          <Image src={this._updateProgress()} />
        </View>
        <View style={{paddingLeft: 23, paddingRight: 23, flexDirection: 'row'}}>
          <TouchableOpacity onPress={this.option1()}>
            <View style={styles.button}>
              <Text>{this.state.option1}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.option2()}>
            <View style={styles.button}>
              <Text>{this.state.option2}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.option3()}>
            <View style={styles.button}>
              <Text>{this.state.option3}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

Answer 1

替换所有onPress方法

来自：

onPress={this.option1()}

收件人：

onPress={() => this.option1()}

Answer 2

尝试使用

onPress={() => this.option1()}首先是一个匿名函数，并调用option1或onPress={ this.option1}。这些将阻止重新渲染。

此错误是由于调用onPress={this.option1()}时引起的，它调用函数并导致应用重新渲染，这再次导致函数被调用，从而导致无限循环。最好的方法是不带括号onPress={this.option1}直接调用它，或者创建一个仅执行一次的匿名函数onPress={() => this.option1()}

希望有帮助。毫无疑问

不变违反错误：超出最大更新深度

2 个答案: