fetch API not sending data via post

Question

I am having trouble sending data via post using Fetch API, the server only receives an empty JSON. Can someone help me? Basically, I'm updating the data in state and sending to API.

submitedData = request.

submitedData = async (event) => {
   event.preventDefault();
   let data = {produto: this.state.produto, preco: this.state.preco};
   data = JSON.stringify(data);
   const result = await fetch('/api/add', {
       method: 'post',
       body: data
   });
   const body = await result.json();
   if(result.status == 200){
       //if all that's ok
   }else{
       console.log(body.message);
   }
}

changeInput = change the states.

changeInput = (event) => {
    const field = event.target.name;
    this.setState({ [field]: event.target.value });
}

render = triggers submitedData.

render(){
    return(
        <Grid>
            <Row>
                <Col sm={12}>
                    <Form horizontal onSubmit={this.submitedData} >
                        <FormGroup>
                            <Col sm={1}> <b> Produto: </b> </Col>
                            <Col sm={8}> 
                                <FormControl type="text" placeholder="Produto" value={this.state.produto} onChange={this.changeInput} name="produto" required/>
                            </Col>
                        </FormGroup>
                        <FormGroup>
                            <Col sm={1}> <b> Preço: </b> </Col>
                            <Col sm={8}> 
                                <FormControl type="number" placeholder="Preço" value={this.state.preco} onChange={this.changeInput} name="preco" required />
                            </Col>
                        </FormGroup>
                        <FormGroup>
                            <Col smOffset={1} sm={8}>
                                <Button type="submit" bsStyle="success"> Salvar </Button>
                            </Col>
                        </FormGroup>
                    </Form>
                </Col>
            </Row>
        </Grid>
    );
}

API

var express = require('express');
var Crud = require('./database/Crud');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.json());

app.post('/api/add', function(req, res){
  res.send(req.body);
  console.log(req.body); // {} json empty
});

nem035 · Accepted Answer · 2019-01-19 18:49:39Z

3

You need to stringify the request body and add the JSON content type header.

const result = await fetch('/api/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data)
});

edited Jan 19, 2019 at 18:49

answered Jan 19, 2019 at 18:43

nem035

35.5k6 gold badges93 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fetch API not sending data via post

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related