Question

我正在从React Native Navigation的侧面菜单中导航到此“历史记录”选项卡。得到了一个我可以完成所有“预订”的用户名，但是我可以在警告选项卡中看到即使安装了组件后也有无数的请求，因此可能是由setState引起的无限循环。我应该在哪里调用getHistory（），以便仅发出一个请求，除非当然要重新加载该组件。谢谢！

constructor(props){
        super(props);
        this.state = {
            loggedUser: 'none',
            bookingsInfo: []
        }
    }

    getData = async () => {
        try {
          const value = await AsyncStorage.getItem('loggedUser')
          if(value !== null) {
            this.setState({
                loggedUser: value
            })
          }
        } catch(e) {
            console.error(e);
        }
    }

    getHistory() {
            fetch('https://porsche.e-twow.uk/reactnative/istoric.php', {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'Cache-Control': 'no-cache, no-store'
                },
                body: JSON.stringify({
                    username: this.state.loggedUser
                })
            })
            .then((response) => response.json())
            .then((data) => {
                this.setState({
                    bookingsInfo: data
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }

    componentDidMount() {
        this.getData();
    }

    render() {
        this.getHistory();
        return (
            <View style={styles.view}>
                <ScrollView style={styles.scrollView}>
                    {
                        this.getHistory()
                    }
                    {
                        this.state.bookingsInfo ? this.state.bookingsInfo.map((item, index) => {
                            return (
                                <View style={styles.mainButton} key={item.id_scooter}>
                                    <Text style={styles.mainButtonText}>Scooter-ul {item.id_scooter}</Text>
                                    <Text style={styles.mainButtonText}>Data start: {item.start}</Text>
                                    <Text style={styles.mainButtonText}>Data final: {item.end}</Text>
                                </View>
                            )
                        }) : null
                    }
                </ScrollView>

                <Footer/>
            </View>
        );
    }
}

Answer 1

您正在render中设置状态。在此处调用setState使您的组件成为产生无限循环的竞争者。将getHistory放在componentDidMount中。

  componentDidMount() {
   this.getHistory();
 }

显示数组时，React Native Post请求导致无限循环

1 个答案: