Не может использовать остальные API (Web Api) из компонента React

Question

Я занимаюсь разработкой веб, он использует остальные API, этот остальные API собирается в asp.net как Web API.Моя проблема присутствует, когда пытаются потреблять конечную точку, потому что использовать выборку, но это не показывать.

это мой код

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>
        )
    }
}

, но нажатие кнопки не отображает данные в консоли, только показывает их

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, и попробовал с почтальоном, и он показывает
access-control-allow-origin → *

Я не понимаю, почему в компоненте реагируетне показывает никакого результата

Answer 1

Первая проблема заключается в том, что ваш метод GetParametersPickTicket просто регистрирует полученный json, но никогда не возвращает его.Таким образом, потребитель этого метода просто получит пустое разрешенное обещание.См. Мой комментарий «Эта часть отсутствовала» в следующем фрагменте:

 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))
}

Вторая проблема заключается в том, что вы перенаправлены при отправке формы, я прав?Таким образом, вам нужно предотвратить это поведение формы по умолчанию, добавив event.preventDefault() в начале вашего handleSubmit метода:

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