reactjs 如何初始化挂接后才能访问的数据？

ajsxfq5m 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(118)

下面是我正在尝试做的一个例子：

import { useRouter } from "next/router";

import { useCollection } from "react-firebase-hooks/firestore";
import { db } from "@/firebase/clientApp";
import { collection } from "firebase/firestore";

export default function Test(){
    const router = useRouter();
    const {id} = router.query
    const [data, dataLoading, dataError] = useCollection(collection(db, "drafts", id), {})

    return(
    <div>Hello!</div>
    )
}

正如你所看到的，我使用id的值来初始化useCollection钩子。然而，id会改变，并且首先是未定义的，然后改变为正确的值。这使得整个事情中断，并且以上甚至在typescript中是无效的。我需要在定义id之后初始化useCollection钩子。这只是在组件“挂载”之后。我尝试将usecollection（...）放置在useEffect中，但它不起作用。

reactjs

来源：https://stackoverflow.com/questions/75763627/how-to-initialize-hook-with-data-that-can-only-be-accessed-after-mounting

1条答案

按热度按时间

fiei3ece1#

因为你使用的是nextjs，所以你可以利用getServerSideProps来为你的组件生成id作为初始的props，这样它就总是被定义的：

export async function getServerSideProps({ params }) {
  const id = params.id;

  return {
    props: {
      id,
    },
  };
}

然后你从你的组件中得到它作为 prop

export default function Test({id}){
 //...
}

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 如何初始化挂接后才能访问的数据？

1条答案

相关问题

热门标签

最新问答