Вызов метода публикации Api по нажатию кнопки в React

Question

У меня есть событие, как показано ниже:

    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

Любая помощь, пожалуйста?

Answer 1

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

PS: если все работает нормально, примите ответ. Надеюсь, что это решит вашу проблему

Answer 2

Полагаю, вам нужно связать свой обработчик, но без целого кода компонента действительно сложно разобраться.

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