代码组件问题排查

代码组件问题排查

在 Framer 中,错误消息“我们检测到您的某个代码组件/覆盖中存在问题”表示您的自定义 React 代码中存在一个问题。

最常见的原因是 useEffect Hook 内部返回了非函数的内容。例如:

由于箭头函数的语法,这段代码向 React 返回了一个数字,从而导致崩溃。要修复此问题,请将函数体用花括号包裹:

为什么我的代码组件没有渲染?

如果由于错误导致代码组件崩溃,Framer 会隐藏该插入内容,以防止影响页面其余部分的渲染。一旦你修复了组件中的错误,插入内容就会正常显示。

如果代码组件在服务端渲染期间尝试访问浏览器特有的 API(例如 windowdocumentnavigator),Framer 会将其隐藏,并在页面加载时尝试重新渲染。为避免此问题,请确保这些 API 在 useEffect() Hook 中调用。如果你的组件仍然不显示,请检查函数中是否存在错误或有问题的代码。

如何查看我的代码组件是否有错误?

当代码组件崩溃时,控制台会显示错误信息。在错误旁边你会看到一个标识符(例如 code-crash:IilknqsQI:TlIGJvk3t)。将此标识符粘贴到快速操作中(CMD + K 或 CTRL + K)即可定位出问题的组件。

有关代码覆写的疑问,请在我们的 开发者社区 提问,或查阅我们的官方文档 此处

Create a free website with Framer, the website builder loved by startups, designers and agencies.