反应原生：使用 useEffect 进行无限循环答案

【问题标题】：react native : infinite loop with useEffect反应原生：使用 useEffect 进行无限循环
【发布时间】：2021-08-05 12:06:56
【问题描述】：

当我运行应用程序时，它会进入无限循环这是因为pointsData 在 useEffect 中。这种情况如何解决？

function useGetPoints() {
    const [pointsData, setPointsData] = useState<PointTbleType[]>([]);

    React.useEffect(() => {
        loadDataFromPointTables()
    }, [])

    const loadDataFromPointTables = () => {
        (async () => {
            try {
                const points = await PointTable.getPointList()
                setPointsData(points);
                // if (!points.length) {
                //     Toast.show({ type: 'info', text1: 'There is no data in the table point' })

                // }
            } catch (error) {
                console.warn('Error from loadDataFromPointTables(): ', error);
            }
        })();
    }
    return {
        pointsData
    }
}

export const PointModal = (props: any) => {
    const { pointsData } = useGetPoints();
    const [tableHead] = useState(['Area', 'Site', 'Collection Point', 'Location']);
    const [tableData, setTableData] = useState<any[]>([]);

    const arrangeData = () => {
        let rows: any[] = [];
        pointsData.forEach(e => {
            let row = [e.Area, e.Site, e.GatheringPoint, e.Location];
            rows.push(row);
        });
        setTableData(rows);
    }

    useEffect(() => {
        arrangeData();
    }, [pointsData]);

    return (
        <Modal
            animationType={'slide'}
            transparent={false}
            visible={props.pointModalVisible}
            onRequestClose={() => {
                console.log('Modal has been closed.');
            }}>
            <View style={styles.modal}>
                {pointsData.length ?
                    <ScrollView style={styles.item}>
                        <View style={styles.tableView}>
                            <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
                                <Row data={tableHead} style={styles.head} textStyle={styles.text} />
                                <Rows data={tableData} textStyle={styles.text} />
                            </Table>
                        </View>
                    </ScrollView>
                    :
                    <ActivityIndicator size="large" color='white' />}
            </View>
            <Button
                title="CLOSE"
                onPress={props.onClose}
            />
        </Modal>
    );
};

【问题讨论】：

你想达到什么目的？
请查看我的选项，它应该可以帮助你:)
loadDataFromPointTables 调用 setPointsData 来改变 pointsData 并且当 pointsData 改变时，你调用 loadDataFromPointTables。

标签： javascript reactjs react-native redux

【解决方案1】：

很明显会陷入死循环。您将 pointsData 作为 useEffect 的依赖项，而 loadDataFromPointTables 将值分配给 pointsData。删除 pointsData 作为依赖项，每个都将按预期工作。

【讨论】：

但是如果我将删除 pointsData 以便它的数据不会在应用程序开始时开始启动..这就是为什么我把它放在那里但它会产生无限循环
@emma 如果你删除它，它会在组件挂载时至少运行一次。
那么在第一次上传应用程序时数据将如何正确加载？当前数据仅来自第二个会话或更高版本或刷新。我不知道如何在应用第一次加载时加载数据。

【解决方案2】：

这是因为您没有检查 pointsData 是否为空。首先，我会在开始时将 pointsData 设置为 null 或 undefined：

const [pointsData, setPointsData] = useState<PointTbleType[]>(undefined);

然后你必须检查它是否不为空或未定义，然后调用函数来获取数据：

  React.useEffect(() => {
        if(!pointsData){
           loadDataFromPointTables();
         }
    }, [pointsData])

第二个选项是从 useEffect 中的依赖数组中删除 pointsData，这样它只会运行一次。

【讨论】：

【解决方案3】：

这是因为您在更新 pointsData 时没有设置任何条件。试试下面的代码应该可以工作

function useGetPoints() {
const [pointsData, setPointsData] = useState<PointTbleType[]>([]);

React.useEffect(() => {
    loadDataFromPointTables()
}, [pointsData])

const loadDataFromPointTables = () => {
    (async () => {
        try {
            const points = await PointTable.getPointList()
            if(points != pointsData){
               setPointsData(points);
            }
        } catch (error) {
            console.warn('Error from loadDataFromPointTables(): ', error);
        }
    })();
}
return {
    pointsData
}

}

【讨论】：