无法在reactjs

Question

我是reactjs的新手，试图找到答案，但是我仍然遇到同样的问题。我已经检查了所有相同的问题和答案，例如this，但没有一个问题对我有帮助，因此，如果您有任何相同的问答，请告诉我。

我有一个html表单，该表单假定接受一个zip文件和一个字符串，然后希望通过Post方法将它们传递到Web服务。

我拥有Spring Boot编写的其余api服务器，现在尝试创建一个客户端测试项目来对其进行测试。 Postman的测试成功了，我可以毫无问题地发送请求并接收响应，但是使用此API失败了。通过从互联网资源中学到的知识，我的应用程序发生了很大变化，这是我遇到的最后一步

如果有人可以帮助我查找错误，我将不胜感激。

这是我的ReactJs代码：

import React, {Component} from 'react';
import img from "./images/test.jpg"
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; 

class DoPost extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit  = this.handleSubmit.bind(this);
        this.state = {
            id:null,
            fileData:null,
            url:"http://localhost:8990/getId"
        };
    }





    handleSubmit(event) {

        let formData = new FormData();
        formData.append('fId', this.fId.value);
        formData.append('inputPackage', this.inputPackage.value); 
        console.log(this.fId.value);
        console.log(this.inputPackage.value);
        fetch(this.state.url, { 
            method: 'POST',
            body: formData
        }).then(res => {
            alert(res);
        });


    }



    render() {

        return (<div>
                <section className="login-block">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4 login-sec">
                                <form onSubmit={this.handleSubmit}>
                                    <label htmlFor="fId">fId Id:</label>
                                    <input type="text" name="fId" id="fId" ref={el => this.fId = el} /><br/><br/>
                                     <div className="form-group files color">
                                        <label>Upload Your File </label>
                                        <input type="file" name="inputPackage" ref={el => this.inputPackage = el}  required
                                                className="file-controller"/>
                                    </div>
                                    <div className="align-center">
                                        <input type="submit" className="btn btn-lg btn-info " value="Send the request" />
                                    </div>
                                </form>
                            </div>
                            <div className="col-md-8 banner-sec">
                                <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                    <div className="carousel-inner" role="listbox">
                                        <div className="carousel-item">
                                            <img className="d-block img-fluid" src={img} alt="First slide"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
}

export default DoPost;

Answer 1

我不知道您在这里遇到了什么错误，但是您的fetch出了点问题。 fetch的第一个回应是一个承诺，您需要兑现。

fetch(this.state.url, { 
            method: 'POST',
            body: formData
        })
         .then( res => res.json())
         .then( res => {
            alert(res);
        })
);

此外，您需要在event.preventDefault()方法中添加handleSubmit，以防止在提交表单后刷新。

handleSubmit(event) {
    event.preventDefault();
    let formData = new FormData();
    ...