Question

我有一个如下事件：

no-pattern

我有一个如下按钮：

    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'];

请帮忙吗？

Answer 1

我的猜测是您需要绑定处理程序，但是如果没有完整的组件代码，这真的很难分辨。

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))
}

Answer 2

@Abdul：对于未获取错误的api帖子，可能是CORS错误的一种可能情况，即浏览器不允许您访问其他网络（专用和安全的IP地址），因此您需要像我一样实际允许代理设置可以看到您的帖子数据没有启用任何代理。这是我要附加的代码

这是伪代码，请在您的提取方法中进行相应的更改：

    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
            })
        )
    };

P.S .：如果正常，请接受答案。希望这能解决您的问题

在React中的按钮单击上调用Api post方法

2 个答案: