React 导入表单：Ajax 请求到 axios答案

【问题标题】：React import form: Ajax request into axiosReact 导入表单：Ajax 请求到 axios
【发布时间】：2020-12-01 00:30:29
【问题描述】：

所以我试图用 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, 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')
);

仅供参考：我是前端，我是 React 的新手，我正在努力学习，如果你给我一些我可以阅读和学习的链接，我将不胜感激。提前致谢

【问题讨论】：

你导入 jquery ajax 库来使用 $.ajax 了吗？按照这个：reactjs.org/docs/faq-ajax.html 除了 Axios 和其他库 - 你也可以尝试 fetch API。
我只想使用 axios，我不想拥有任何其他库，不过感谢您提供的链接

标签： javascript reactjs axios frontend

【解决方案1】：

你在这行有错误

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

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

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

【讨论】：

谢谢，但我仍然在 ajax 表单上有一些东西，我不知道如何在 axios 中定义。不过我还在研究。感谢您的宝贵时间

【解决方案2】：

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

dta 应该是请求负载

【讨论】：

没有限制，因为dta 应该是 JSON。