反应本机Firestore无限循环

时间:2020-09-12 15:11:32

标签: javascript reactjs firebase react-native react-native-firebase

我正在尝试使用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>
 )
}

1 个答案:

答案 0 :(得分:1)

每次调用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没有更改,则没有理由再次触发该效果。