变量在使用Next JS和服务器操作分配之前使用

7y4bm7vi  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(124)

我正在使用Next JS的新数据获取功能从API加载数据并将其分配给一个名为“contact”的变量。然而,我遇到了错误消息“变量”contact“在分配之前已使用”。
我想确保我正确地处理这种情况,并防止错误发生。如何正确地构建服务器操作以从API加载数据并将其分配给“contact”,以便解决错误,并按预期使用数据?

export default async function Page() {
    let contact: Contact

    try {
        [contact] = await getContact(104);
    } catch (e: FetchError) {
        console.log(e.message)
    }

    ......
    <EditContactForm contact={contact}/>  <-- Variable is used before being assigned
6qftjkof

6qftjkof1#

TS认为contact在使用时没有必要具有值。
添加一个守卫:

{
     contact && <EditContactForm contact={contact}/>
}

这将确保EditContactForm仅在定义contact时才呈现。

rslzwgfq

rslzwgfq2#

这是因为“contact”变量在被赋值之前就被使用了。
若要修复此问题,您可以使用默认值初始化“contact”变量,或处理API调用失败且“contact”仍未定义的情况。

export default function Page({ initialContact }: { initialContact?: Contact }) {
  const [contact, setContact] = useState<Contact | undefined>(initialContact);

  useEffect(() => {
    async function fetchData() {
      try {
        const [fetchedContact] = await getContact(104);
        setContact(fetchedContact);
      } catch (error) {
        console.log(error.message);
      }
    }

    if (!initialContact) {
      fetchData();
    }
  }, [initialContact]);

  // Render loading state while contact is being fetched
  if (!contact) {
    return <div>Loading...</div>;
  }

  return <EditContactForm contact={contact} />;
}

相关问题