Question

我是钩子的新手，给人的印象是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();
    });

Answer 1

是的，您可以在页面加载后立即使用useEffect（）运行某些程序。但是，要实现此目的，您必须添加第二个参数（在这种情况下为空数组），使其仅在安装和卸载时运行（否则，它也将在更新时运行）。

意思是，它应该像这样：

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

侧面说明：通过在空数组内添加状态变量（如[myState]），您将为该状态创建一个侦听器。在这种情况下，useEffect仅在此状态下可用作“ didUpdate”功能。

Answer 2

当您使用reactHooks和useEffect时，第二个取决于您的需要，例如，是否需要在页面加载后立即运行某些东西，而数组中的第二个参数为“空” []，反之则为

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这里输入的代码需要在页面加载后立即运行，并“监听”某些更改，例如声明const

[hello,setHello] = React.useState('hello');

并

useEffect(() => {
        console.log(hello);
},[hello]);

只要页面加载完毕，您就可以在控制台“ hello”中看到，但是在某个地方setHello('bye'); 你好正在听变更，您将在控制台中看到“再见”，这就是听的意思，您可以在https://www.youtube.com/watch?v=j1ZRyw7OtZs&t=734s

处了解有关useEffect的更多信息。

无限循环-React Native useState useEffect

2 个答案: