пустое свойство и значение в React при получении пост-запроса - PullRequest
Новая
       50

пустое свойство и значение в React при получении пост-запроса

0 голосов
/ 21 сентября 2018

Это школьное задание React.Приложение имеет два поля ввода и кнопку отправки.OnClick отправляет запрос выборки после ввода с входными значениями.Там нет базы данных, только файлы JSON, хранящие значения.Запрос проходит без ошибок, но тело в файле JSON пусто.

Другие детали: React по-прежнему отображает двоеточие между значениями.Например, вместо "Christy: Post one" он отображает ":".Поля ввода работают;Я могу сказать в инструментах React dev, потому что onChange обновляет состояние.

Я пробовал:

  • изменив contentType на "application / x-www-form-urlencoded"

  • добавление этих строк на сервере: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json())

    импорт React, {Component} из 'response';

    класс NewChirp extends Component {constructor () {супер ();this.state = {пользователь: "", text: ""} this.fetchChirps = this.fetchChirps.bind (this) this.inputHandler = this.inputHandler.bind (this)} 

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

fetchChirps() {
    fetch('http://127.0.0.1:3000/api/chirps/', {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        // contentType: "application/x-www-form-urlencoded",
        body: JSON.stringify({
            user: this.state.user,
            text: this.state.text,
        })
    })
        .catch(err => console.log(err))
}

render() {
    return (
        <div>
            <div className="input"></div>
            <form action="">
                <input
                    type="text"
                    placeholder="UserName"
                    size="10"
                    id="user"
                    name="user"
                    onChange={this.inputHandler}
                    defaultValue={this.state.user}
                />
                <input
                    type="text"
                    placeholder="Type a new chirp"
                    size="60"
                    id="text"
                    name="text"
                    onChange={this.inputHandler}
                    defaultValue={this.state.text}
                />
                <button onClick={this.fetchChirps} id="submit">Submit</button>
            </form>
        </div >
    )
}

    }экспорт по умолчанию NewChirp;

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

Попробуйте что-то вроде: 

import React, { Component } from 'react';

class NewChirp extends Component {
    constructor() {
        super();
        this.state = {
          user: '',
          text: '',
        }
        this.fetchChirps = this.fetchChirps.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
    }

    inputHandler(e) {
      this.setState({
        user: e.target.user,
        text: e.target.text
        });
    }

    fetchChirps() {
    fetch('http://127.0.0.1:3000/api/chirps/', {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        // contentType: "application/x-www-form-urlencoded",
        body: JSON.stringify({
            "user": this.state.user,
            "text": this.state.text,
        })
    })
        .then(response => console.log(response))
        .catch(err => console.log(err))
}

render() {
    return (
        <div>
            <div className="input"></div>
            <form action="">
                <input
                    type="text"
                    placeholder="UserName"
                    size="10"
                    id="user"
                    name="user"
                    value={this.state.user}
                    onChange={this.inputHandler}
                />
                <input
                    type="text"
                    placeholder="Type a new chirp"
                    size="60"
                    id="text"
                    name="text"
                    value={this.state.text}
                    onChange={this.inputHandler}
                />
                <button onClick={this.fetchChirps} id="submit">Submit</button>
            </form>
        </div >
    )
}
}
export default NewChirp;

извините, форматирование дерьмовое, но вы, вероятно, получите суть

0 голосов
/ 22 сентября 2018

Похоже, все, что мне нужно, это обернуть contentType: 

            headers: {
            "Content-Type": "application/json"
        }
0 голосов
/ 21 сентября 2018

Если поля, которые вы отправляете, печатаются пустыми, то реквизиты не передаются от родителя обратно ребенку правильно.Я бы предложил переместить inputHandler в компонент NewChirp и оставить пользователя и ввод в состоянии NewChirp.

...