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

7y4bm7vi 于 2023-10-18 发布在其他

关注(0)|答案(2)|浏览(127)

我正在使用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

next.js

来源：https://stackoverflow.com/questions/77311654/variable-is-used-before-being-assigned-using-next-js-and-server-actions

2条答案

按热度按时间

6qftjkof1#

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

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

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

赞(0）回复(0）举报 2023-10-18

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} />;
}

赞(0）回复(0）举报 2023-10-18

我来回答

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

2条答案

相关问题

热门标签

最新问答