當顯示數組時，React Native post請求會導致無限循環

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使你的組件成為產生無限循環的競爭者。 在componentDidMount中放置getHistory。

  componentDidMount() {
   this.getHistory();
 }