无限循环-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时，第二个取决于你需要什么，例如，如果你需要在页面加载后立即运行某个东西，数组中的第二个参数是"空"[]，另一方面，如果你

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

在这里输入代码需要在页面加载后立即运行一些东西，并保持"侦听"，例如，对于一些更改，您声明了一个常量

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

和

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

页面加载后，您可以在控制台中看到"hello"，但在setHello('bye');hello正在收听更改，你会在控制台中看到"再见"，这就是收听的意思，你可以在这里看到更多关于useEffect的信息https://www.youtube.com/watch?v=j1ZRyw7OtZs&t=734s