Fetch API未通过POST方法发送数据

Question

我在使用Fetch API发送数据时遇到了问题，服务器只收到一个空的JSON。有人能帮我吗？基本上，我正在更新状态中的数据并将其发送到API。

提交的数据为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 = 改变状态。

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

渲染 = 触发 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
});

- Showtime

---

请展示触发submitedData方法的代码，以及在submitedData之前的状态更改代码。 - Danyal Imran

已完成，我编辑了。 - Showtime

Answer 1

您需要将请求正文字符串化，并添加JSON内容类型头。

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

- nem035