Question

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

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

在第二屏幕中 - ＆gt;从第二屏幕登录
回复 - ＆gt;从第一个屏幕登录
responseData：.. - ＆gt;从第一个屏幕登录
导航至第二个屏幕 - ＆gt;从第一个屏幕登录
里面的fetchData - ＆gt;从第一个屏幕登录
回复 - ＆gt;从第一个屏幕登录
responseData：.. - ＆gt;从第一个屏幕登录
在第二屏幕中 - ＆gt;从第二屏幕登录

然后进入循环。

第一个屏幕代码：

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

第二个屏幕代码：

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调用？

版本：

react-native@0.50.4

设备：Android

Answer 1

您是否考虑过将fetchData函数移动到第二个屏幕并放入componentDidMount生命周期方法？

React-Native - 在获取api cal

1 个答案: