Javascript 在React中下载JSON

尝试在React中通过创建一个使用异步调用更新的状态变量来遵循这个很好的示例。当链接被渲染，我点击链接时，它表示网络错误

// constructor

      this.state = {
        linkReady: false,
        data: {}
      };

// ***
      show() {
        return (
          <a href={`data: ${this.state.data} `} download={"data.json"}>Download JSON</a>
        );
      }

      download() {
         this.props.downloadRequest({action: "download"}).then(
            (obj) => {
              this.setState({
                linkReady: true,
                data: "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj))
              });
            }
          );
        }

//构造函数
此.state={
linkReady:false，
数据：{}
};
// ***
show（）{
返回(
);
}
下载（）{
this.props.downloadRequest（{action:“download”}）(
（obj）=>{
这是我的国家({
林克莱德：没错，
数据：“text/json；charset=utf-8，”+encodeURIComponent（json.stringify（obj））
});
}
);
}

我做错了什么

编辑

经过一些调查，我发现问题在于从服务器返回的对象太大。我把这个物体变小了，它就工作了

因为我不希望我的对象中有特殊字符，所以我删除了

encodeURIComponent

，并且可以下载这个大文件

---

如果有更好的解决方案，我想知道。

首先，当您发出请求时，您应该检查您的服务器是否有安全连接（我假设您在下载请求时发出异步请求）

另外，您应该删除

href

属性中的加号（

+

）。您正在使用字符串插值，因此不需要它

href={`data: ${this.state.data}`}

另一件事（由于没有看到完整的代码，我不知道它目前是如何实现的，但是）确保链接已经准备好了——所以我建议您在渲染链接之前创建一些条件

最后一个-我已经为您创建了工作沙盒-它可能会帮助您

---

希望有帮助

一,。为什么要在

中设置下载属性？2.为什么要将数据初始化为对象，然后为其分配字符串？3.你能更具体地解释一下当你点击锚时抛出的错误吗？@jpacareu我在代码中做了一个小编辑。1.我试着效仿。2.我不认为这有什么关系，因为当我初始化为字符串时，会出现相同的错误。3.文件“data.json”开始下载，然后我得到了“Failed-Network error”，不确定，但可能问题之一是模板中包含加号（+），可能是从示例复制时的打字错误。假设：检查我使用模板字符串做了什么，我遇到了相同的问题，问题是href@jpacareu谢谢你的帮助。原来我的物体太大了。谢谢你的帮助。沙箱帮了大忙。结果是我的对象太大了，不知怎的失败了。@EdvBeq不客气！如果你还有其他问题，不要犹豫。