无法在 React Native 中使用 Javascript 'fetch' 发布 JSON？答案

【问题标题】：Can't Post JSON with Javascript 'fetch' in React Native?无法在 React Native 中使用 Javascript 'fetch' 发布 JSON？
【发布时间】：2021-06-30 18:17:28
【问题描述】：

我目前正在做一个非常简单的项目。当我尝试控制台记录 req.body 时，它给了我一个空对象。

app.js (React Native)

const musicPlayingHandle = () => {
    setMusicPlaying(!isMusicPlaying);
    fetch('http://192.168.1.23:3000/musicHandler', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type' : 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then((response) => response.json())
    .then((res) => {
      return res;
    })
  }

server.js（Node JS 后端 API）

require('dotenv').config();

const express = require('express');
const ejs = require('ejs');
const cors = require('cors');

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.set('view engine', 'ejs');                          
app.set('views', __dirname+'/views');                   
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index');
});

app.post('/musicHandler', (req, res) => {
    console.log(req.body);
    res.json({'msg': 'OK!'});
});

app.listen(3000, '0.0.0.0', () => {
    console.log('Canım Çok Sıkıldı Çalışıyor...');
});

【问题讨论】：

什么是data？你有多确定它不是一个空物体？你有多确定它是 JSON 可序列化的？
@JaredSmith 'const data = { value: isMusicPlaying.toString() };'我在互联网上看到了这个，我也尝试了很多其他方法，当应用程序收到一个帖子请求时我会记录 imgur.com/a/L2VFql5 这是我通过 react native 发送帖子请求时的输出
我认为您需要将 body-parser 放在 express 设置 expressjs.com/en/resources/middleware/body-parser.html 上。也不要忘记在后端尝试 catch。并在最后一个之后的前端，然后您可以添加 catch like => then((res) => return res).catch((err)=>console.log(err))

标签： javascript node.js react-native post fetch

【解决方案1】：

您应该使用 JSON 有效负载解析传入的请求。

在 server.js 中添加中间件功能：

app.use(express.json())

【讨论】：