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

问题描述

因此，我尝试使用axios制作此ajax表单，但由于某种原因它无法运行。它向我显示了前端，但背面没有任何内容。注释后的代码是我正在尝试使用axios的ajax请求，而我编写的axios在其下。

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,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')
);

仅供参考：我是前任，我是React的新人，我正在尝试学习，如果您向我发送一些可以阅读和学习的链接，我将不胜感激。预先感谢

解决方法

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

dta应该是请求有效载荷

,

您在此行中有错误

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

在ES6 {dta} shorthand to {dta: dta}中，作为axios的第二个参数需要http请求的正文。 因为已经有了Form Object，您可以像这样直接传递它

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