无法从组件 React 使用 rest api (Web Api)

Question

我正在开发一个 web，它使用一个 rest api，这个 api rest 是在 asp.net 中作为 Web Api 构建的。尝试使用端点时存在我的问题，因为使用了 fetch，但这没有显示任何内容。

这是我的代码

import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
class BundleShipping extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pickTicket: '',
            Pallets: [],
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ pickTicket: event.target.value });
    }

    handleSubmit(event) {
        this.GetParametersPickTicket('016683O01', 'en-US', 'e3eda398-4f2a-491f-8c8e-e88f3e369a5c')
            .then((responseData) => { this.setState({ Pallet: responseData.Data.Pallet }) })
            .then((response) => console.log(response))
    }


    GetParametersPickTicket(PickTicket, language, Plant) {
        console.log(PickTicket)
        console.log(language)
        console.log(Plant)
        return fetch('http://localhost:55805/api/GicoBundleWA/GetParametersPickTicket', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                pickTicket_str: PickTicket,
                kPlant: Plant,
                language: language
            }),
        }).then((response) => response.json())
            .then((responseJson) => { console.log(JSON.stringify(responseJson)) })
            .catch((err) => console.log(err))
    }



    render() {
        const columns = [{
            dataField: 'PalletNumber',
            text: 'Estibas Cargadas'
        }, {
            dataField: 'Quantity',
            text: 'Cantidad'
        }, {
            dataField: 'Bundles',
            text: 'Bultos'
        }, {
            dataField: 'Date_Time',
            text: 'Fecha de carga'
        }];


        return (
            <div className="container">
                <form onSubmit={this.handleSubmit}>
                    <div className="col-lg-2 col-md-2 col-xs-3">
                        <label>Shipping</label>
                    </div>
                    <div className="form-group col-lg-5 col-md-5 col-xs-5">
                        <input type="text" value={this.state.pickTicket} onChange={this.handleChange} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Pick Ticket" />
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
                <BootstrapTable keyField='PalletNumber' data={this.state.Pallets} columns={columns} />
            </div>
        )
    }
}

但是按钮中的onclick不会在控制台中显示数据，只显示它

016683O01                                  VM494 bundle.js:67423
en-US                                      VM494 bundle.js:67424 
e3eda398-4f2a-491f-8c8e-e88f3e369a5c       VM494 bundle.js:67425
Navigated to http://localhost:3000/xxxx?
react-dom.development.js:17286 Download the React DevTools for a better development experience: 

我做了一些测试来发现我的错误，例如直接在控制台中执行代码：

function GetParametersPickTicket(PickTicket, language, Plant) {
   console.log(PickTicket)
   console.log(language)
   console.log(Plant)
    return fetch('http://localhost:xxx/api/XXX/YYYY', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                pickTicket_str: PickTicket,
                kPlant: Plant,
                language: language
            }),
        }).then((response) => response.json())
            .then((responseJson) => { console.log(JSON.stringify(responseJson)) })
            .catch((err) => console.log(err))
    }

GetParametersPickTicket('016683O01', 'en-US', 'e3eda398-4f2a-491f-8c8e-e88f3e369a5c')

如果它显示我的答案 json。

此外，我解决了 cors 的问题，并尝试使用 postman 并显示
访问控制允许来源 →*

我不明白，为什么在组件中反应没有显示任何结果

Answer 1

第一个问题是您的方法GetParametersPickTicket 只是记录接收到的 json，但它永远不会返回它。因此，此方法的使用者将仅收到一个空的已解决承诺。在下面的 sn-p 中查看我的评论“这部分丢失了”：

 GetParametersPickTicket(PickTicket, language, Plant) {
    return fetch('http://localhost:55805/api/GicoBundleWA/GetParametersPickTicket', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            pickTicket_str: PickTicket,
            kPlant: Plant,
            language: language
        }),
    }).then((response) => response.json())
      .then((responseJson) => { 
           console.log(JSON.stringify(responseJson)
           return responseJson // <-- This part was missing
      })
      .catch((err) => console.log(err))
}

第二个问题是提交表单时您会被重定向，对吗？因此，您需要通过在 handleSubmit 方法的开头添加 event.preventDefault() 来防止这种默认表单行为：

handleSubmit(event) {
    event.preventDefault()
    // ... other code here
}