自定义钩子返回值在组件中不会改变

Question

我的自定义挂钩异步获取数据。当它在组件中使用时，返回值不会更新。它一直显示默认值。有人知道发生了什么事吗？谢谢你！

import React, {useState, useEffect} from 'react'
import { getDoc, getDocs, Query, DocumentReference, deleteDoc} from 'firebase/firestore'

export const useFirestoreDocument = <T>(docRef: DocumentReference<T>) => {
  const [value, setValue] = useState<T|undefined>(undefined)
  const [isLoading, setIsLoading] = useState<boolean>(true)
  const update = async () => {
    const docSnap = await getDoc(docRef)
    if (docSnap.exists()) {
      const data = docSnap.data()
      setValue(data)
    }
    setIsLoading(false)
  }
  useEffect(() => {
    update()
  }, [])
  console.log(value, isLoading)  // it can shows correct data after fetching
  return {value, isLoading}
}

import { useParams } from 'react-router-dom'
const MyComponent = () => {
  const {userId} = useParams()
  const docRef = doc(db, 'users', userId!)
  const {value, isLoading} = useFirestoreDocument(docRef)
  console.log(value, isLoading)  // keeps showing {undefined, true}.
  return (
    <div>
    ...
    </div>
  )
}

Answer 1

看起来 youe hook 在渲染时只执行一次，因为它缺少 docRef 作为依赖项：

export const useFirestoreDocument = <T>(docRef: DocumentReference<T>) => {
  const [value, setValue] = useState<T|undefined>(undefined)
  const [isLoading, setIsLoading] = useState<boolean>(true)
 
  useEffect(() => {
    const update = async () => {
      const docSnap = await getDoc(docRef)
      if (docSnap.exists()) {
        const data = docSnap.data()
        setValue(data)
      }
      setIsLoading(false)
    }
    update()
  }, [docRef])
  console.log(value, isLoading)  // it can shows correct data after fetching
  return {value, isLoading}
}

另外：将您的 update 函数定义放在 useEffect 挂钩中，如果您在其他地方不需要它。否则，你的 linter 将会抱怨 exhaustive-deps 规则。

Answer 2

useEffect 钩子缺少对 docRef 的依赖：

export const useFirestoreDocument = <T>(docRef: DocumentReference<T>) => {
  const [value, setValue] = useState<T|undefined>(undefined);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  
  useEffect(() => {
    const update = async () => {
      setIsLoading(true);
      try {
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
          const data = docSnap.data();
          setValue(data);
        }
      } catch(error) {
        // handle any errors, log, etc...
      }
      setIsLoading(false);
    };

    update();
  }, [docRef]);

  return { value, isLoading };
};

渲染循环问题是因为 docRef 在 MyComponent< 中的每个渲染周期都被重新声明。 /代码>。您应该记住该值，以便将稳定的引用传递给 useFirestoreDocument 挂钩。

const MyComponent = () => {
  const {userId} = useParams();

  const docRef = useMemo(() => doc(db, 'users', userId!), [userId]);

  const {value, isLoading} = useFirestoreDocument(docRef);

  console.log(value, isLoading);
  return (
    <div>
    ...
    </div>
  );
};