Как получить данные из реагирования и API - PullRequest
0 голосов
/ 11 октября 2018

Я пытаюсь опубликовать данные формы от реакции на серверную часть узла. Как это сделать?Мой код React:

import fetch from 'isomorphic-fetch';

export function createBio (data) {

    console.log(data);

    return fetch('http://localhost:3001/user/create', {
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify(data),
        headers: {

            'Content-Type': 'application/json',

        }

    }).then(res => {
        return res;
    }).catch(err => console.log(err));
}

Мой код NodeJs

router.post('/create', (req,res,) => {

    var user = new User({title: req.params.title || "Untitled Note", body: req.params.body});
    user.save();

});

Как получить данные

Ответы [ 4 ]

0 голосов
/ 16 октября 2018

Мой лучший способ, начать создавать файл api.js

import axios from "axios";

export default {
    user: {
        createBio: data => axios.post(`${process.env.API_HOST}/user/create`, {data}).then(res => res),
    }
}

, а затем вы можете вызвать функцию createBio из вашего компонента или действия, если вы используете redux,

, если у вас возникли проблемы. Access-Control-Allow-Origin use CORS

0 голосов
/ 11 октября 2018

Вы отправляете запрос в «/ user / create», когда ваш сервер Node.js прослушивает «create».Попробуйте изменить

fetch('http://localhost:3001/user/create'

на

fetch('http://localhost:3001/create'
0 голосов
/ 11 октября 2018

req.param() выполняет поиск указанного пути в URL-пути, теле и строке запроса (в указанном порядке).Если в запросе нет ни одного значения параметра с указанным name, он возвращает undefined или необязательный defaultValue, если указан.

параметры пути URL (req.params)

например, запрос /create/4 на маршрутизацию /create/:id содержит параметры пути URL req.params.id: с помощью этого идентификатора вы можете изменить все, что захотите, но вы должны добавить ":" перед своим параметром

параметры тела (req.body)

например, запрос с анализируемым телом (например, JSON, url-кодированный или XML) имеет параметры тела, равные его проанализированному значению

если вы хотите получить заголовок, вы можете написать req.body.title

Для вашего случая я рекомендую использовать req.body

Ваш серверный API

//http://localhost:3001/user/create
    router.post('/create', (req,res) => {

    const user = new User(
          {
          title: req.body.title ===null ? 'Untitled Note' : req.body.title, 
          text: req.body.text
          });
    user.save();

});

Вы должны определить, к какому значению относятся ваши данные

data = {
title: '?',
text: '?'
};

Ваш выбор

import fetch from 'isomorphic-fetch';

export function createBio (data) {

    console.log(data);

    fetch('http://localhost:3001/user/create', {
        method: 'POST',
        mode: 'no-cors',
        body: JSON.stringify(data),
        headers: {

            'Content-Type': 'application/json',

        }

    }).then(res => {
        return res;
    }).catch(err => console.log(err));
}

Убедитесь, что ваш путь правильный

В любом случае, я использую 'axios' для извлечения данных

router.post('/'),
    (req, res) => {
        const newPost = new Post({
            eventTitle: req.body.eventTitle,
            eventText: req.body.eventText
        });

        newPost.save().then(post => res.json(post));
    });

axios

const postData = {
title: '?',
text: '?'
};
     axios
            .post('/api/posts', postData)
            .then(res => console.log(res))
            .catch(err => console.log(err));

Получить параметры

**!But this title should be assigned a value. not a null value**


router.post('/:title'),
        (req, res) => {
            const newPost = new Post({
                eventTitle: req.params.title,
                eventText: req.body.eventText
            });

            newPost.save().then(post => res.json(post));});

   const postData = {
    title: '?',
    text: '?'
    };
         axios
                .post(`/api/posts/${postData.title}`, postData.text)
                .then(res => console.log(res))
                .catch(err => console.log(err));

Если у вас есть какие-либо вопросы о получении, вы можете использовать это https://developer.mozilla.org/en-US/.

Надеюсь, это полезно для вас.На самом деле, я никогда не использовал fetch, но axios с ним одинаков.

PS: вы должны добавить это для вашего server.js, чтобы получить значение со стороны клиента.Промежуточное программное обеспечение для синтаксического анализа тела Node.jsАнализируйте входящие тела запросов в промежуточном программном обеспечении перед вашими обработчиками, доступными в свойстве req.body.

const bodyParser = require('body-parser');
// for parsing application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// for parsing application/json
app.use(bodyParser.json());

Последний ответ на ваш комментарий и вашу проблему.

Во-первых, вы должны добавить proxy к вашему клиентскому пакету. Json Вы можете npm I concurrently запустить сервер и клиент одновременно

Ваш package.json должен включать --- Я не создал сервер json, это может быть неправильный формат.Но только тест. part of ** должен быть записан в файл package.json сервера!Если вы не хотите его использовать, вы можете просто сосредоточиться на коде, это решит вашу проблему.

{
  "name": "react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "concurrently": "^4.0.1",
    "express": "^4.16.4",
    "fetch": "^1.1.0",
    "node-fetch": "^2.2.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4",
    "isomorphic-fetch": "^2.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    **"server": "node server.js",**
    **"client": "npm start",**
    **"dev": "concurrently \"npm run server\" \"npm run client\"",**
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

npm I node-fetch на стороне клиента

  import React, {Component} from 'react';
    //import axios from 'axios';
    //import fetch from 'node-fetch';
  import fetch from 'isomorphic-fetch';
    class SendMessage extends Component {
        constructor(props) {
            super(props);
            this.state = {
                title: '',
                text: ''
            };

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(e){
        e.preventDefault();
        const newUser = {
            title: this.state.title,
            text: this.state.text,
        };
        // axios.post('/users/create', newUser)
        //     .then(res => console.log(res))
        //     .catch(err => console.log(err));



        fetch('/users/create', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newUser)
        }).then(res=>res.json())
            .then(res => console.log(res));


    }

    onChange(e){
        this.setState({[e.target.name]:e.target.value})

    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input type="text" name='title' onChange={this.onChange} value={this.state.title} placeholder="title"/>
                    <input type="text" name='text' onChange={this.onChange} value={this.state.text} placeholder="text"/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}

export default SendMessage;

на стороне сервера server.js

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



//import route
const users = require('./route');

var app = express();


//Body parser middleware
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());


// Use routes
app.use('/users', users);



const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

на стороне сервера route.js

const express = require('express');
const router = express.Router();

router.post('/create', (req,res) => {

    console.log(req.body);
    const user =
        {
            title: req.body.title ===null ? 'Untitled Note' : req.body.title,
            text: req.body.text
        };
    res.status(200).json(user);

});

module.exports = router;
0 голосов
/ 11 октября 2018

Вы можете использовать body-parser middleware для анализа тела вашего запроса

в вашем server.js:

const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json({limit: '10mb'}));

и предполагать, что вы отправляете объектна сервер, например:

let data = {
    myProp: 'myVal1'
}

Затем вы можете получить его в запросе:

router.post('/create', (req,res,) => {
    let value = req.body.myProp;
    console.log('value in body: ' + value);
    // execute...
});

Это будет протоколировать:

value in body: myVal1

Я также настоятельно рекомендуюиспользуя Axios для ваших запросов вместо fetch, и прочитайте мой ответ в этом посте , где я обсуждаю некоторые различия и как реализовать axios, если вы уже используете fetch.Таким образом, вам не нужно, например, систематизировать свои данные, и вы решаете другие проблемы, обсуждаемые там.

Если вы используете Axios (с async / await), установите объект запроса следующим образом:

let reqObj = {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8'
    },
    url: 'http://localhost:3001/user/create',
    data:  {
        myProp: 'myVal1'
    }
};

и отправить запрос в axios с:

let response = await axios(reqObj);
...