无限循环 - React Native useState useEffect答案

【问题标题】：Infinite Loop - React Native useState useEffect无限循环 - React Native useState useEffect
【发布时间】：2020-02-21 22:57:55
【问题描述】：

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

【问题讨论】：

标签： firebase react-native infinite-loop react-state-management use-effect

【解决方案1】：

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

意思应该是这样的：

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

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

【讨论】：

有趣，所以第二个参数是初始页面加载后的监听器？
你能进一步解释一下吗？ @Olivia 这解决了你的问题吗？

【解决方案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'); hello 正在监听更改，您将在控制台中看到“再见”这意味着监听，您可以在此处查看有关 useEffect 的更多信息https://www.youtube.com/watch?v=j1ZRyw7OtZs&t=734s

【讨论】：