React-Native - 在获取api cal后导航到另一个屏幕时遇到问题

这是一个带有世博会的CRNA应用程序 . 在第一个屏幕上点击按钮，我需要先进行一次获取API调用，捕获响应并导航到第二个屏幕，传递API响应 .

我面临的问题是当我在按钮点击'Create'时调用fetchData方法时，它成功导航到当时回调函数中的SecondScreen（responseJson）但是我注意到即使在显示SecondScreen之后，屏幕仍然保持自动刷新，我检查了日志，并在成功导航到SecondScreen后看到了这个日志序列：

• 在第二个屏幕中 - >从第二个屏幕记录

• 响应 - >从第一个屏幕登录

• responseData：.. - >从第一个屏幕登录

• 导航到第二个屏幕 - >从第一个屏幕登录

• 在fetchData内部 - >从第一个屏幕登录

• 响应 - >从第一个屏幕登录

• responseData：.. - >从第一个屏幕登录

• 在第二个屏幕中 - >从第二个屏幕记录

这进入了一个循环 .

First Screen code:

class FirstScreen extends Component {
    constructor(props){
        super(props);

        this.state = {
          isSubCreated: false,
          isItemSelected : '',
          subdata: {}
        };
    }

    fetchData(){
        console.log("inside fetchData");

        fetch('http://hostname:port/',{
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then((response) => {console.log('response'); return response.json();})
            .then((responseJson) => {console.log('responseData: '+responseJson); this.setState({isSubCreated : true, subdata : responseJson}); this.props.navigation.navigate('SecondScreen', {subdata : responseJson});})
            .catch((err) => {console.log(err)}).done();  
    }

    render() {
        const subdata = this.state.subdata;

        const { params } = this.props.navigation.state.params;

        if (this.state.isSubCreated) {
            console.log("Navigate to Second screen");
        }

        return (
            <Container style={styles.container}>
            <View>
                <TouchableHighlight onPress={this.fetchData()}>
                    <Text>Create</Text>
                </TouchableHighlight>
            </View>
            </Container>
        )
    }
}

Second Screen code:

class SecondScreen extends Component {
    constructor(props){
        super(props);
        this.state = {
          subdata: {}
        };
    }

    render() {
        const subdata = this.state.subdata;            
        const { params } = this.props.navigation.state.params;
        console.log("In Second screen");
        return (
            <Container style={styles.container}>
                <Content padder style={{ padding: 20 }}>
                    <View>
                        <Text>{this.props.navigation.state.params.subdata.data}</Text>
                    <View>
                </Content
            </Container>
        )
    }
}

请帮助我理解为什么即使在成功导航到SecondScreen之后它又回来获取FirstScreen的API调用？

Version:

react-native@0.50.4

设备：Android