React Native Firestore 無限循環

Question

我正在嘗試使用 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>
 )
}

Answer 1

每次調用setCurrentUser您都在強制重新渲染（因為這是一個狀態變量）。 然后您的useEffect再次觸發，再次調用setCurrentUser ，依此類推，導致無限循環。

為了防止這種情況，您應該設置一個useEffect在觸發之前應該偵聽的變量列表。 您可以通過將第二個參數傳遞給useEffect來做到這useEffect 。

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

如果您希望useEffect只觸發一次，類似於componentDidMount ，您可以傳遞一個空數組。

從文檔：

如果您只想運行效果並僅將其清理一次（在裝載和卸載時），您可以傳遞一個空數組 ([]) 作為第二個參數。 這告訴 React 你的 effect 不依賴於來自 props 或 state 的任何值，所以它永遠不需要重新運行。 這不是作為特殊情況處理的——它直接遵循依賴項數組的工作方式。

在您的情況下，您似乎希望將user放入此數組中，因為這是您的 firestore 調用所依賴的唯一變量。 如果user.uid沒有改變，就沒有理由再次觸發這個效果。