React Native post request вызывает бесконечный цикл при отображении массива

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