React Native post请求在显示数组时导致无限循环答案

【问题标题】：React Native post request causes infinite loop when displaying arrayReact Native post请求在显示数组时导致无限循环
【发布时间】：2019-05-22 10:56:35
【问题描述】：

我正在从 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>
        );
    }
}

【问题讨论】：

您可能希望将getHistory 移动到componentDidMount。永远不要在 render 方法中调用 setState

标签： javascript android reactjs react-native mobile

【解决方案1】：

您正在渲染中设置状态。在这里调用 setState 会使您的组件成为产生无限循环的竞争者。将 getHistory 放在 componentDidMount 中。

  componentDidMount() {
   this.getHistory();
 }

【讨论】：

制作 getHistory 箭头函数 gethistory=()=>{}