Неправильно введено значение ввода запроса POST - PullRequest
Новая
       31

Неправильно введено значение ввода запроса POST

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

Итак, я пытаюсь добавить NewPost и получаю:

"Предупреждение. Компонент изменяет неконтролируемый ввод текста типа для управления. Элементы ввода не должны переключатьсяот неконтролируемого к контролируемому (или наоборот). Выберите между использованием контролируемого или неконтролируемого входного элемента для срока службы компонента. "

... ошибка, когда он говорит" this.state.title "

Ps: я использую nodejs, mongodb и реагирую 

e.preventDefault();

  const newPost = {

  title: this.state.title,
  typeOfProduction: this.state.typeOfProduction
  };

Вот мой код: 

 import React, { Component } from 'react';
 import './NewPost.css';


 class NewPost extends Component {
state = {
    posts:{
        title: '',
        typeOfProduction: ''
    }   
}

postDataHandler(e) {
    e.preventDefault();
    const newPost = {
      title: this.state.title,
      typeOfProduction: this.state.typeOfProduction
    };
    fetch('/projects', {
      method: 'POST',
      body: JSON.stringify(newPost),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(console.log);

}
render(){

return(
        <div className="Dashboard container-fluid">
        <div className="NewPost">
            <h1>Add a Post</h1>
            <label>Title</label>
            <input type="text" value={this.state.title} name="title" ref="title" onChange={(event) => this.setState({title: event.target.value})} />
            <label>Type of Production</label>
            <select value={this.state.typeOfProduction} name="typeOfProduction" ref="typeOfProduction" onChange={(event) => this.setState({typeOfProduction: event.target.value})}>
                <option value="Fiction">Fiction</option>
                <option value="Tv">TV</option>
                <option value="Tv">Documentary</option>
            </select>

            <button type="submit" onClick={this.postDataHandler}>Add Post</button>
        </div>
    </div>
 );
}
}


export default NewPost;

1 Ответ

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

инициализировать состояние, как это, удалить posts. 

state = {
     title: '',
    typeOfProduction: ''
}
...