React NativeにてaxiosのPOSTで値を送信できない

Question

【環境】

	使用技術
クライアントサイド	React Native、axios
サーバーサイド	Node.js、Express

【バージョン】

	ver
Node.js	v16.15.0
Express	4.16.1

本題

React NativeにてaxiosのPOSTの挙動の確認をしているのですが、第二引数に指定したオブジェクトがbodyの中に入らずに困っています。

想定している結果は email：[e-mail] です。

調べても出てくるのは送った値の整形のやり方ばかりで、送る段階の情報がなかなか見つからなかったです。

どなたかご回答をお願いいたします。

conosle.log(req)の結果

app.js（React Native）

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import axios from 'axios';
// import { type } from 'express/lib/response';

const host = 'http://192.168.0.195:3000'

export default function App() {

  const sendTmpUser = async () => {
    try {
      await axios.post(host + '/api/tmp_user',
        { email: '[e-mail]' }
      );
    } catch (error) {
      console.log(error);

    } finally {

    }
  }

  return (
    <View style={styles.container}>
      <Text>メールアドレス</Text>
      <TextInput
        style={styles.input}
        placeholder='mail'
      />
      <Text>パスワード</Text>
      <TextInput
        style={styles.input}
        placeholder='password'
      />

      <Button
        title='送信'
        onPress={() => {
          sendTmpUser();
        }}
      />

      <StatusBar style="auto" />

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    width: 150
  },
});

app.js（Node.js）

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

// app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.urlencoded({ extended: false }));

//routes
const userRouter = require('./routes/user');
const tmpUserRouter = require('./routes/tmp_user');
const postRouter = require('./routes/post');
const handHistoryRouter = require('./routes/hand_history');

app.use('/api/user', userRouter);
app.use('/api/tmp_user', tmpUserRouter);
app.use('/api/post', postRouter);
app.use('/api/hand_history', handHistoryRouter);

app.listen(3000);

routes/tmp_user.js（Node.js）

const express = require('express');
const app = express();
const router = express.Router();
const connection = require('../connetction')
const uuid = require('node-uuid');
const bodyParser = require('body-parser');

// app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));

router.get('/', (req, res) => {
})

router.post('/', (req, res) => {
    console.log(req);
})

module.exports = router;

Answer 1

以下の修正でどうでしょう？

- const bodyParser = require('body-parser');

- // app.use(express.json());
+ app.use(express.json());
- app.use(bodyParser.urlencoded({ extended: false }));
+ app.use(express.urlencoded({ extended: false }));

Comments

[kazu235]

ご回答ありがとうございます。

app.jsの方をご回答通り変更して、tmp_user.jsの方のbodyParserとexpress.json()を削除しましたら、想定した値を送ることができました。