代码组件问题排查
在 Framer 中,错误消息“我们检测到您的某个代码组件/覆盖中存在问题”表示您的自定义 React 代码中存在一个问题。
最常见的原因是 useEffect Hook 内部返回了非函数的内容。例如:
由于箭头函数的语法,这段代码向 React 返回了一个数字,从而导致崩溃。要修复此问题,请将函数体用花括号包裹:
为什么我的代码组件没有渲染?
如果由于错误导致代码组件崩溃,Framer 会隐藏该插入内容,以防止影响页面其余部分的渲染。一旦你修复了组件中的错误,插入内容就会正常显示。
如果代码组件在服务端渲染期间尝试访问浏览器特有的 API(例如 window、document 或 navigator),Framer 会将其隐藏,并在页面加载时尝试重新渲染。为避免此问题,请确保这些 API 在 useEffect() Hook 中调用。如果你的组件仍然不显示,请检查函数中是否存在错误或有问题的代码。
如何查看我的代码组件是否有错误?
当代码组件崩溃时,控制台会显示错误信息。在错误旁边你会看到一个标识符(例如 code-crash:IilknqsQI:TlIGJvk3t)。将此标识符粘贴到快速操作中(CMD + K 或 CTRL + K)即可定位出问题的组件。
有关代码覆写的疑问,请在我们的 开发者社区 提问,或查阅我们的官方文档 此处。