如何解决不变违规：React-Native 中超过了最大更新深度？

Question

在我的 React-native 项目中，我想根据 onPress 上的 TouchableOpacity 元素更改一张图片。因此，我在 state - catImage 中声明了一个变量。为了更改图像，我声明了一个名为 updateImage 的函数

  updateImage(image) {
    this.setState({
        catImage: image
    })
  }

在下面你可以看到这个类的演示-

在水平滚动中的 (ToDo) 图标中，通过按下它们我想更改 catImage 变量的值以及在第一张图像中标记的 Title TextInput 旁边的图像。

这是类的代码 - HelloWorldApp.js

HelloWorldApp.js

import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet, Image, TextInput, NetInfo, TouchableOpacity } from 'react-native';

export default class HelloWorldApp extends Component {

    state = {

        isLoading:false,
      }

      constructor() {
        super();
        this.state = {
          title:'',
          details:'',
          timestamp   : '',
          status: '',
          url:'',
          mail:'',
          phone:'',
          category:'',
          showLoader:false,
          showAlert: false,
          isNetConnected: true,
          catImage: null,
        }
      };

      updateImage(image) {
        this.setState({
            catImage: image
        })
      }

      updateValue(text, field) {

        if(field == 'title') {
          this.setState({
            title : text
          })
        }


        else if(field == 'details') {
          this.setState({
            details : text
          })
        }

      }

      // net connection starts
componentDidMount() {

    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }
  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener(
      "connectionChange",
      this.handleConnectivityChange
    );
  }
  handleConnectivityChange = isConnected => {
    if (isConnected) {
      this.setState({ isConnected });
    } else {
      this.state.isNetConnected = false;
      alert("Oops!! No Internet Connection Available");
      this.setState({ isConnected });
    }
  };
  // net connection ends


  render() {
    return (

        <View style={{flex:1}}>

            <ScrollView keyboardShouldPersistTaps={'handled'}>

            <View style={styles.container}>

                <View style={styles.inputContainerEmail}>
                <Image style={styles.inputIcon} source={{uri: this.state.catImage}}/>
                <TextInput style={styles.inputs}
                    placeholder="Title"
                    keyboardType="email-address"
                    underlineColorAndroid='transparent'
                    onChangeText={(text) => this.updateValue(text, 'email')}/>
                </View>

                <View style={styles.inputContainerDetails}>

                <TextInput style={styles.inputs}
                    placeholder="Details"
                    multiline 

                    underlineColorAndroid='transparent'
                    onChangeText={(text) => this.updateValue(text, 'email')}/>
                </View>


                <ScrollView horizontal={true}>

                <View style={{flexDirection:'row', flex:1, marginTop:10, marginBottom:10, marginRight:20, marginLeft:10}}>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}
                       onPress={this.updateImage('https://img.icons8.com/nolan/64/000000/todo-list.png')}
                    >
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}>
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

                </View>

                </ScrollView>

            </View>

            </ScrollView>

        </View>


    );
  }
}

但是每当我运行该项目时，它都会显示以下错误- 如何解决 Invariant 违规：React-Native 超出最大更新深度？

所以，我想知道如何通过单击屏幕底部的图标来更改标题 TextInput 旁边的图像。

Answer 1

 <TouchableOpacity style={{justifyContent:'center', alignItems:'center', marginRight:10}}
                       onPress={()=>{this.updateImage('https://img.icons8.com/nolan/64/000000/todo-list.png')}}
                    >
                    <Image style={styles.inputIconCategory} source={{uri: 'https://img.icons8.com/nolan/64/000000/todo-list.png'}}/>
                    <Text style={{marginLeft:25, marginTop:5}}>To Do</Text>
                    </TouchableOpacity>

只需在您的第一个组件TouchableOpacity中使用箭头功能。

 onPress={()=>{this.updateImage('https://img.icons8.com/nolan/64/000000/todo-list.png')}}