React native 不变冲突错误：超过最大更新深度

我是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>
    );
  }
}

import React，{Component}来自'React'；
进口{
看法
文本，
安全区域视图，
可触摸不透明度，
形象,，
滚动视图，
样式表，
}从“反应本机”；
从“react native Reactivated”导入{color}；
从“反应本机向量图标/离子图标”导入离子图标；
从“react navigation”导入{createAppContainer}；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
const styles=StyleSheet.create({
进度条：{
宽度：218，
身高：24，
边界半径：12，
边框颜色：“灰色”，
边框宽度：1，
玛金托普：70，
paddingRight:79，
paddingLeft:79，
},
文字：{
fontFamily：“Arial”，
尺码：85，
fontWeight:'粗体'，
},
图像：{宽度：345，高度：391，边界半径：50，边界顶点：31}，
按钮：{宽度：100，高度：80，边界半径：29，边界水平：5}，
});
导出默认类quizC扩展React.Component{
状态={
进展：0，
进度条：0，
progressbarwidth:0，
字：''，
图像源：“”，
选项：0，
选项1:“”，
选项2:“，
选项3:“，
更正选项：0，
分数：0，
};
_updateProgress（）{
开关（this.state.imagesource）{
案例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'}）；
//返回猫
打破
案例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'}）；
//回程犬
打破
}
}
_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}）；
}否则{
this.setState（prevState=>（{progress:prevState.progress+1}））；
this.setState（{imagesource:this.state.progress}）；
}
}
选择1（）{
this.setState（{option:1}）；
这个；
这个。_updateProgress（）；
}
选择2（）{
this.setState（{option:2}）；
这个；
这个。_updateProgress（）；
}
选择3（）{
this.setState（{option:3}）；
这个；
这个。_updateProgress（）；
}
render（）{
返回(
{this.state.words}
{this.state.option1}
{this.state.option2}
{this.state.option3}
);
}
}

更换所有按下的

方法

发件人：

onPress={this.option1（）}

致：

onPress={（）=>this.option1（）}
更换所有按下的
方法

发件人：

onPress={this.option1（）}

致：

onPress={（）=>this.option1（）}
尝试使用

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

此错误是由于当您调用
onPress={This.option1（）}
时，它调用该函数并导致应用程序重新呈现，这再次导致调用该函数，从而导致无限循环。最好的方法是不使用括号直接调用它，或者创建一个只执行一次的匿名函数

希望能有帮助。不要怀疑
尝试使用

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

此错误是由于当您调用
onPress={This.option1（）}
时，它调用该函数并导致应用程序重新呈现，这再次导致调用该函数，从而导致无限循环。最好的方法是不使用括号直接调用它，或者创建一个只执行一次的匿名函数

希望能有帮助。不要怀疑