反应导入形式：Ajax 请求到 axios

Question

So I'm trying to make this ajax form with axios, but for some reason it doesn't run. It shows me the front-end but there is nothing on the back. The commented code is the ajax request that I'm trying to do with axios and the axios that I wrote is under it.

class IpvImport extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            requestObject: {},
            submitCompleted: false,
            disabled: false,
        };
    }
    handleSubmit(event, instance) {
        var that = this;
        var data = this.state.requestObject;
        var dta = new FormData();
        if (this.state.disabled) {
            return;
        }
        this.setState({ disabled: true });

        Object.keys(data).forEach(function (key, index) {
            dta.append(key, data[key]);
        });

                //$.ajax({
        //    url: window.basePageUrl + "/ImportData",
        //    type: "POST",
        //    enctype: 'multipart/form-data',
        //    data: dta,
        //    processData: false,
        //    contentType: false,
        //    cache: false,
        //    timeout: 600000,
        //    success: function (importResult) {
        //        const newState = Object.assign({}, that.state);
        //        newState.importLog = importResult;
        //        that.setState(newState);
        //    },
        //    fail: function () {
        //        that.state.error = true;
        //    },
        //    complete: function (data) {
        //        that.setState({ submitCompleted: true, error: that.error, disabled: false })

        //    }
        //});
        axios.post(window.basePageUrl + "/ImportData", {
            dta
        })
            .then(function (response) {
                const newState = Object.assign({}, that.state);
                newState.importLog = importResult;
                that.setState(newState);
            })
            .catch(function (error) {
                that.state.error = true;
            }).then(() => {
                that.setState({ submitCompleted: true, error: that.error, disabled: false })
            })
        event.preventDefault();
        return false;
    }
    handleField(event, instance) {
        const target = event.target;
        const domType = target.tagNAME;
        const inputType = target.attributes && target.attributes["type"] ?
            target.attributes["type"].value : null;
        var name = target.name;
        var tagName = target.tagName;

        if (inputType && inputType.toLowerCase() == "file") {
            const newState = Object.assign({}, this.state);
            newState.requestObject[name] = target.files[0];
            this.setState(newState);
        }
        else if (tagName && tagName.toLowerCase() == "select") {
            const newState = Object.assign({}, this.state);
            newState.requestObject[name] = target.value;
            this.setState(newState);
        }
    }

render() {
    var that = this;
    return <div class="sf-app" id="root">
        <div id="root" class="sfMain sfClearfix sf-form -sf-centered-box -sf-txt-align-left">
            <div class="sfContent">
                <div>
                    <div>
                        <label class="sf-field__label ng-tns-c9-8 ng-star-inserted">
                            <h1 class="title">File import</h1><br />
                            <h4 class="sub_title">Click on the button and select the file that you want to upload, then click import to import it</h4>
                            <h4 class="summary">File to import (.xlsx):</h4><br />
                        </label><br />
                        <input type="file" onChange={event => that.handleField(event, that)} id="XlsxFile" name="XlsxFile" /><br /><br />
                    </div>
                </div>
                <div>
                    <button type="button" id="submittBtn" class='sf-button -action' onClick={event => that.handleSubmit(event, that)} disabled={this.state.disabled}>
                        <span class="sf-button__content">
                            {this.state.disabled ? 'Importing...' : 'Import'}
                        </span>
                    </button>
                </div><br />
                {this.state.importLog != null ? Logs(this.state.importLog) : null}
            </div>
        </div>
    </div>
}
}
const Logs = (props) => {
    return (
        <div class="log_panell">
            <strong>Import log:</strong>
            <ol>
                {props.map(function (p) {
                    return <li class={p.Severity.toLowerCase()} dangerouslySetInnerHTML={{ __html: p.Message }}></li>
                })}
            </ol>
        </div>
    )
}

ReactDOM.render(
    <IpvImport />,
    document.getElementById('root')
);

FYI: I'm front ender, I'm newby with the React and I'm trying to learn and I'll be gratefull if you send me some links that I can read and learn from them. Thanks in advance

Answer 1

axios.post(window.basePageUrl + "/ImportData", dta).....

dta should be request payload

Answer 2

You have error in this line

 axios.post(window.basePageUrl + "/ImportData", {
            dta
        })

In ES6 {dta} shorthand to {dta: dta} as 2nd parameter of axios expects body of the http request. as you have already Form Object with you you can directly pass it like this

 axios.post(window.basePageUrl + "/ImportData", dta)