useMemo 中的异步函数不起作用

Question

我有一种情况，我有一个包含所有书籍的对象，我想获取位于不同集合中的作者信息。我尝试在 useMemo 中获取数据，但我收到了一个错误，因为我猜这个 promise 没有得到解决。如何让useMemo等待作者的数据到来？

async function useAuthor(authorID:string) { 
      await firestore.collection('users').doc(authorID).get().then(doc => {
         return doc.data();
    })   
};      

  const normalizedBooks = useMemo(
    () =>
      books?.map( (book) => ({
        ...book,
        author: useAuthor(book.authorId),
      })),
    [books]
  );

Answer 1

获取远程数据应该在效果中完成：

function useAuthor(authorID:string) { 
    const [author, setAuthor] = useState(null);

    useEffect(() => {
        firestore.collection('users').doc(authorID).get().then(
            doc => setAuthor(doc.data())
        );   
    }, [authorID]);

    return author;
}

请注意，author 在第一次渲染期间将是 null，直到请求完成。您可以通过例如改进该示例添加加载和错误状态。或者你也可以使用类似react-query 的东西，它提供了开箱即用的功能：

import useQuery from 'react-query';

function getItemById(collectionID:string, itemID:string) {
    return firestore.collection(collectionID).doc(itemID).get().then(
        doc => doc.data()
    );
}

const Author = ({authorID}) => {
    const {data: author, isLoading, error} = useQuery(
        ['users', authorID], 
        getItemById
    );

    if (isLoading) return 'Loading...'

    if (error) return 'Failed to fetch author :(';

    return <p>{author.name}</p>;
}