Question

我正在尝试在我的react项目中加载很多网络动画，但我一直收到此错误，无法理解其含义

InvalidStateError：仅当responseType为时，responseText才可用 ”或“文档”。

这是我下面的React组件：

import React, { Component } from "react";
import "./Submit.css";
import PropTypes from "prop-types";
import lottie from "lottie-web";

class Submit extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    lottie.loadAnimation({
      container: document.getElementById("animation"), // the dom element that will contain the animation
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "../anim/email.json" // the path to the animation json
    });
  }

  render() {
    return <div id="animation" />;
  }
}

Submit.propTypes = {};

export default Submit;

有什么想法吗？

Answer 1

path应该是可以通过网络请求获取JSON的路径，而不是文件系统路径。

通过将email.json放在public文件夹中来尝试在根目录中提供"/email.json"，并将path用作ref。您也可以在render方法的元素上放置class Submit extends Component { ref = null; componentDidMount() { lottie.loadAnimation({ container: this.ref, renderer: "svg", loop: true, autoplay: true, path: "/email.json" }); } render() { return <div ref={ref => this.ref = ref} />; } }使其成为完全模块化的组件。

示例

   export function onDownloadGuide(action$,store){
  return action$.ofType(DOWNLOAD_GUIDE)
    .mergeMap(() => downloadGuideAssets().map(res => downloadGuideAssetProgress(res)))
}

function downloadGuideAssets(){
  const subject$ = new Subject()
  getAssetList().map((asset) => downloadAsset(asset).map(res => {console.log(res);subject$.next(res)}))
  return subject$.asObservable()
}

function downloadAsset({id,src}){

  const subject$ = new Subject()

  window.resolveLocalFileSystemURL(cordova.file.dataDirectory, dirEntry => {
    dirEntry.getFile(src.substring(src.lastIndexOf('/')+1),{create:true, exclusive:true}, f => {
      fetch(src).then(fetchProgress({onProgress(progress) {console.log('progressevent');subject$.next({id,progress})}}))
        .then(res => res.blob())
        .then(blob =>
          f.createWriter(writer => {
            writer.onwriteend = ()=> subject$.next({id,complete:true})
            writer.write(blob)
          }))
        .catch(err => subject$.next({id,error:err}))

    }, err => subject$.next({id,error:err}) )
  })

  return subject$.asObservable()
}

Answer 2

您可以使用animationData代替path prop lottie.loadAnimation支持。唯一要做的就是将email.json文件转换为js文件，并将其中的json对象保存为const。如果导出此const，然后将其导入到您要用作的文件中：

 //email.js file
const email = {
//the json object
}

export default email.



//your other file

import Email from "../anim/email.js"

 lottie.loadAnimation({
      // the dom element that will contain the animation
      container: document.getElementById("animation"), 
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: Email // the path to the animation json
    });

在响应问题中加载Lottie-Web动画

2 个答案: