时间戳

首页 > 解决方案 > 无限循环 - React Native useState useEffect

firebase - 无限循环 - React Native useState useEffect

问题描述

我是钩子的新手，并且印象中useEffect只在页面加载时运行了一次。我将兴趣状态变量设置为返回的 firebase 响应，但它遇到了无限循环。为什么会发生这种情况？据我了解，firebase.once方法应该只拉回一次数据。

const ProfileCardScreen = ({navigation}) => {
    const user = navigation.getParam('user');
    const [interests, setInterests] = useState([]);

    const getUserProfileData = () => {
        var userId = user.uid;
        firebase.database().ref('/Users/' + userId).once('value').then(function(snapshot) {
            var interests = (snapshot.val() && snapshot.val().interests);
            Object.keys(interests).map(function(key) {
                setInterests(interests);
              });
        });
    };

    useEffect(() => {
        getUserProfileData();
    });

标签： firebasereact-nativeinfinite-loopreact-state-managementuse-effect

解决方案

是的，您可以使用 useEffect() 在页面加载后立即运行某些内容。但是，要实现这一点，您必须添加第二个参数，在本例中为一个空数组，以仅在挂载和卸载时运行（否则它也在更新时运行）。

意思是，它应该如下所示：

useEffect(() => {
    getUserProfileData();
}, []);

旁注：通过在空数组中添加一个状态变量（如：[myState]），您将为该状态创建一个侦听器。在这种情况下，useEffect 将仅作为该状态的“didUpdate”函数工作。

推荐阅读