무한 루프 동안 무한 루프가 발생하는 모달

Question

"최대 업데이트 깊이를 초과했습니다."라는 오류 메시지와 함께 내 에뮬레이터가 멈추는 동안 아래 코드 스 니펫이 무한 루프가되는 이유가 궁금합니다. componentWillUpdate 또는 componentDidUpdate 내부에서 setState를 호출합니다. "

import React, { Component } from 'react'; 
import * as firebase from 'firebase'; 
import { ActivityIndicator, ListView, Modal, Text, View, Button, StyleSheet } from 'react-native'; 

export default class GroceryList extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      modalVisible: false, 
     }; 
    } 

    render() { 
     return(
      <View style={styles.container}> 
       <Text>hi</Text> 
       <Modal 
        visible = {this.setState({modalVisible: false})} 
        animationType={'slide'} 
        onRequestClose={this.setState({modalVisible: false})} 
       > 
        <View style={styles.modalContainer}> 
         <View style={styles.innerContainer}> 
          <Text>This is content inside of modal component</Text> 
          <Button 
           onPress={this.setState({modalVisible: false})} 
           title="Add to cart" 
          /> 
         </View> 
        </View> 
       </Modal> 
       <Button 
        onPress={this.setState({modalVisible: true})} 
        title="PURCHASE ITEM" 
        color="#841584" 
       /> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container:{ 
     flex: 1, 
     justifyContent: 'center', 
     marginTop: 50, 
    }, 
    buttonContainer: { 
     margin: 20, 
    }, 
    modalContainer: { 
     flex: 1, 
     justifyContent: 'center', 
     backgroundColor: 'grey', 
     height: 20, 
    }, 
    innerContainer: { 
     alignItems: 'center', 
    }, 
}) 

Answer 1

버튼에서이 변경을 시도해 볼 수 있습니까?

<Button 
    onPress={() => this.setState({modalVisible: true})} 
    ... 
/> 

렌더링 방법에서 직접 this.setState()을 사용할 수 없습니다. 그게 원인이라고 생각해.

Answer 2

은 다음과 같아야합니다

<Modal 
       visible = {this.state.modalVisible} 
       animationType={'slide'} 
       onRequestClose={this.setState({modalVisible: false})} 
      >