React Nativeのモーダルが無限ループ中になる

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})} 
    ... 
/> 

あなたのrenderメソッドで直接this.setState()を使用することはできません。それが原因だと思う。

Answer 2

は次のようになります。

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