反应本机Firestore无限循环

如何解决反应本机Firestore无限循环

我正在尝试使用documentSnapshot从Firestore中获取用户数据，我可以获取数据，但是它陷入了无限循环，正在更新用户数据，

这是代码

import firestore from '@react-native-firebase/firestore';
export default function HomeScreen() {
     const { user,logout } = useContext(AuthContext);
     const [currentUser,setCurrentUser] = useState('');

     useEffect(() => {
      firestore()
           .collection('users')
           .doc(user.uid)
           .get()
           .then(documentSnapshot => {
                if (documentSnapshot.exists) {
                     setCurrentUser(documentSnapshot.data())
                }
           })

 })
 return (
      <View style={styles.container}>
           <Title>{currentUser.displayName}</Title>
           <FormButton
                modeValue='contained'
                title='Logout'
                onPress={() => logout()} />
      </View>
 )
}

解决方法

每次调用setCurrentUser时，您都在强制重新呈现（因为这是一个状态变量）。然后您的useEffect再次触发，再次调用setCurrentUser，依此类推，导致无限循环。

为防止这种情况，您应设置useEffect在触发前应监听的变量列表。您可以通过向useEffect传递第二个参数来完成此操作。

useEffect(() => {
  // your function call
},[/* list of state/prop variables to respond to */])

如果您希望useEffect仅触发一次，类似于componentDidMount，则可以传递一个空数组。

来自docs：

如果您要运行效果并仅将其清理一次（在挂载和 卸载），则可以传递一个空数组（[]）作为第二个参数。这个 告诉React你的效果不依赖于道具的任何值 或状态，因此它不需要重新运行。这不是特殊处理 情况—直接取决于依赖项数组始终如何 有效。

在您的情况下，您似乎希望将user放置在此数组中，因为这是您的Firestore调用所依赖的唯一变量。如果user.uid没有更改，则没有理由再次触发该效果。