无限循环 - React Native useState useEffect

Question

我是 hook 的新手，我的印象是 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 时，第二个取决于你需要什么，例如，如果你需要一些东西运行一旦页面加载，数组中的第二个参数是 'empty' []，另一方面，如果你

<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>

在此处输入代码需要在页面加载后立即运行并保持 'listening' 对于某些更改，例如您声明一个 const

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

并与

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

一旦页面加载，您就可以在控制台中看到 'hello' 但在某个地方您可以看到 setHello('bye'); 你好正在监听变化，你会在控制台中看到 'bye' 这就是监听的意思，你可以在这里看到更多关于 useEffect 的信息 https://www.youtube.com/watch?v=j1ZRyw7OtZs&t=734s

无限循环 - React Native useState useEffect

Infinite Loop - React Native useState useEffect

firebase

react-native

infinite-loop

react-state-management

use-effect