React Native: Maximum depth exceeded

Question

I'm try to update userProfile image but getting that error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

here is my code

class Profile extends Component {
 state = {
 userImage: require("../assets/cena.jpg"),
 userName: "John Cena",
 userInfo: "The champ is here",
 modal: false,
 image: null,
 hasCameraPermission: null,
 };
 async componentDidMount() {
 const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
 this.setState({ hasCameraPermission: status === "granted" });
 }
 pickImage = async () => {
 let result = await ImagePicker.launchImageLibraryAsync({
 mediaTypes: ImagePicker.MediaTypeOptions.Images,
 allowsEditing: true,
 aspect: [4, 3],
 });
 if (!result.cancelled) {
 this.setState({ image: result.uri });
 this.props.formikProps.setFieldValue("image", result.uri);
 }
 };
 closeModal = () => {
 this.setState({ modal: false });
 };
 render() {
 
 return (
 <SafeAreaView style={styles.screen}>
 <View style={styles.container}>
 <TouchableOpacity
 activeOpacity={0.7}
 onPress={this.pickImage}
 style={styles.TouchableOpacityStyle}
 >
 <MaterialCommunityIcons
 name="camera"
 size={30}
 color={colors.white}
 />
 </TouchableOpacity>
 {!this.state.image && (
 <Image style={styles.image} source={this.state.userImage} />
 )}
 {this.state.image && (
 <Image
 style={styles.edit}
 source={this.setState({ userImage: this.state.image })}
 />
 )}

can someone tell me what's going on?

Answer 1

You can simply do it like this :

 {this.state.image ? (
 <Image style={styles.image} source={this.state.userImage} />
 ) : (
 <Image
 style={styles.edit}
 source={this.state.userImage}
 />
 )}

You can also use the onError prop of image component to change the source prop.

• Kanwarjeet Singh: Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.props.formikProps.setFieldValue') where should i use setstate?
• Syed Ali: What is the purpose of changing state?
• Syed Ali: The error is in your formik line, comment it out and try to run the code.
• Kanwarjeet Singh: i removed it but it's not setting userImage to image i choose from gallery bcoz i need to use setState, it's so easly in function base

Answer 2

remmove the setState as it should be anonymous otherwise will call on every render

 {this.state.image && (
 <Image
 style={styles.edit}
 source={this.setState({ userImage: this.state.image })}
 />
 )}

should be

 {this.state.image && (
 <Image
 style={styles.edit}
 source={this.state.image}
 />
 )}

by the way you can't setState in the source prop as it only be given the picture path !

• Kanwarjeet Singh: so how can I correct it I'm familiar with function base but never done this in class base, can you help?
• Kanwarjeet Singh: Failed prop type: Invalid prop source` supplied to Image.` got that error and that warning promise rejection: TypeError: undefined is not an object (evaluating '_this.props.formikProps.setFieldValue
• M Muzzammil ijaz: comment that formik line.
• Kanwarjeet Singh: i removed it but it's not setting userImage to image i choose from gallery bcoz i need to use setState, it's so easly in function base