在React中单击按钮时调用Api post方法
在React中单击按钮时调用Api post方法
提问于 2019-10-11 05:45:10
我有一个类似下面的事件：
handleDownload(e) {
e.preventDefault();
alert('Hi');
let communityName = this.state['selectedCommunity'];
let files = this.state[files];
fetch(clientConfiguration['filesApi.local'], {
method: 'POST',
headers: new Headers(),
body: JSON.stringify({ communityName: communityName, body: files })
}).then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.log(err))
};我有一个按钮，如下所示：
renderDownloadButton() {
if (this.state.files && this.state.files.filter(i => i.checked).length) {
return (
<button id="download" styles="display: none;" onClick={this.handleDownload} >
Download
</button>
);
}
};它会触发，但会出现以下错误，如有任何帮助，请-谢谢。在…
let communityName = this.state['selectedCommunity'];它给了我错误；
Can not read property state undefined有什么需要帮忙的吗？
回答 2
Stack Overflow用户
发布于 2019-10-11 06:24:50
我的猜测是你需要绑定你的处理程序，但是如果没有完整的组件代码就很难判断。
handleDownload = (e) => {
e.preventDefault();
alert('Hi');
let communityName = this.state['selectedCommunity'];
let files = this.state[files];
fetch(clientConfiguration['filesApi.local'], {
method: 'POST',
headers: new Headers(),
body: JSON.stringify({ communityName: communityName, body: files })
}).then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.log(err))
}Stack Overflow用户
发布于 2019-10-11 14:19:22
@Abdul:对于api post未获取，该错误可能是CORS错误的一种情况，即浏览器不允许您访问其他网络(私有和安全的IP地址)，因此您需要实际允许代理设置，因为我可以看到您的post数据没有启用任何代理。下面是我附加的代码
这是伪代码，请在你的fetch方法中做相应的修改：
var targetUrl ='/downloadableReport'
const res= fetch(targetUrl,{
method: 'POST',
headers: {
'Content-Type': "application/json; charset=utf-8",
},
body: JSON.stringify({
"requestData":{
"userName":"XXX",
"password":"XXXX",
"clientId":"XXXX",
"txnType":"XXXX"
}
})
})
.then(response => response.json())
.catch(error =>{
console.log(error)
})此外，您还需要添加setupProxy.js文件(请注意，该文件的名称应仅限于此)，并添加此代码(具有首选更改)
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
proxy("/downloadableReport",{
target:"http://192.168.1.220:8080/report/abc" ,
changeOrigin:true
})
)
};附言:如果它工作正常，请接受答案。希望这能解决你的问题
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58331499
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号