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

Question

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

的函数。

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

在下面，您可以看到该类的演示-

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

这是该类的代码-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>


    );
  }
}

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

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

Answer 1

ZeroBytePadding

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

 <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>