2

I'm developing a web, it consume a rest api, this api rest is build in asp.net as a Web Api. My issue is present when try consume an endpoint, because use fetch, but this not show any.

this is my code 

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

but onclick in the button not show data in console, only show it 

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:

I did some tests for discover my error, for example execute code directly in console so:

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

and this one if it shows my answer json.

Additionally, i resolved issue with cors, and try with postman and it show
access-control-allow-origin →*

I don't understand, why in component react does not show any result

Improve this question

1 Answer 1

Reset to default
1

First problem is that your method GetParametersPickTicket simply logs the received json, but it never returns it. So, the consumer of this method will simply receive an empty resolved promise. See my comment "This part was missing" in the following snippet:

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

Second problem is that you're getting redirected when your form is submitted, am I right? Thus, you need prevent this default form behaviour by adding a event.preventDefault() in the beginning of your handleSubmit method:

handleSubmit(event) {
    event.preventDefault()
    // ... other code here
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It is correct, I didn't know that if i not set "preventDefault" there are a redirection, i did know that it is for intercept and stop propagation of a request

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.