Next.js中Lottie加载Contentful动画JSON报错：对象不可扩展

问题原因 #

Contentful返回的JSON对象大概率被设置为不可扩展状态（比如通过Object.freeze处理，或是数据获取库/框架的响应式包装导致对象被冻结），而Lottie动画组件在运行时需要向传入的animationData对象添加内部属性（比如completed），尝试修改不可扩展对象就会触发这个报错。本地/public目录的JSON文件导入时是普通可扩展对象，所以不会出现问题。

解决方案 #

• 深拷贝转换为可扩展对象
  最简单的方法是通过JSON.parse(JSON.stringify())对Contentful返回的数据做深拷贝，生成一个全新的可扩展对象，再传给Lottie组件：

  // 假设从Contentful获取到的动画数据为lottieContentfulData
  const animationData = JSON.parse(JSON.stringify(lottieContentfulData));
  // 传入Lottie组件
  <Lottie animationData={animationData} loop autoplay />
  

• 解除响应式代理（如果适用）
  如果你使用的框架或数据库把Contentful返回的数据包装成了响应式对象（比如MobX observable、Vue响应式代理），可以通过对应框架的API解除代理后再使用，或是直接用深拷贝的方式绕过。

• 禁止直接修改原数据
  不要尝试直接给Contentful返回的原始对象添加属性，必须先生成可扩展的副本再传入Lottie组件。

内容的提问来源于stack exchange，提问作者Daniel Sledz