Как я могу использовать состояние, чтобы сделать запрос выборки POST на моем бэкэнде - PullRequest
Новая
       12

Как я могу использовать состояние, чтобы сделать запрос выборки POST на моем бэкэнде

0 голосов
/ 01 ноября 2019

Сейчас я работаю над своим первым приложением, которое я создал в реагировать на нативном языке для внешнего интерфейса и использую Node JS в качестве внутреннего и mongodb для базы данных. Я пытаюсь реализовать регистрационную форму для моего пользователя, но я действительно не знаю, как это сделать с состоянием, потому что оно постоянно говорит, что не может оценить this.state.name. Я хочу сделать POST-запрос с использованием fetch api для регистрации учетной записи, он работает с помощью Postman, поэтому ошибка приходит из моего интерфейса.

Итак, я создаю свою функцию для этого, но хочутело, представляющее значение, введенное пользователем в другом поле, которое я сохраняю в состоянии, когда вы увидите код, будет понятно. Если я использую состояние, оно не работает, однако, если я помещаю какое-то значение непосредственно в свою функцию, оно работает.

Во-первых, это моя функция с API выборки, если я делаю это, она не работает, ниже показано, как я получаю состояние каждого поля (см.) 

clickthebutton = () =>{
    //var data = this.state
    fetch('http://localhost:5050/api/new/register',{
        method:'POST',
        headers : {'Content-Type': 'application/json'},
        body : {
            name:this.state.name,
            age:this.state.age,
            password:this.state.password,
            email:this.state.email
        },       
    })
}
<Input
                        label="Your email address"
                        placeholder="yo@gmail.com"
                        onChangeText={(text)=> this.setState({email:text})}
                        value={this.state.email}
>

Мое состояниевыглядит так: 

this.state={
            email:null,
            password:null,
            name:null,
            age:null,
            dataImage:null
        }

Я хотел бы отправить тело, если я сделаю тело: this.state ничего не отправляет, когда я выполняю console.log (req.body) на моем серверепоказывает пустой объект.

Спасибо за любую помощь

РЕДАКТИРОВАТЬ: проблема исправлена, моя функция не ссылалась на мой класс.

Ответы [ 3 ]

0 голосов
/ 01 ноября 2019

Прежде всего вам нужен правильный элемент для ввода адреса электронной почты и пароля, например (для электронной почты): 

<TextInput
    value={this.state.name}
    keyboardType={'email-address'}
    placeholder="Your email address"
    onChangeText={text => this._onEmailChange(text)}
/>

вам также нужна функция для обновления значения имени (вам потребуется аналогичныйфункция для обновления любого значения, поступающего из элемента TextInput) 

_onEmailChange = text => {
    this.setState({ name: text });
};

Затем вы можете подготовить свой запрос следующим образом 

fetch('http://localhost:5050/api/new/register', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: this.state.name,
      password: this.state.password
      ...
    }),
})
.then(response => response.json())
.then(responseJson => {
  // do what you want with the response here
})
.catch(error => {
    console.error(error);
});
0 голосов
/ 11 ноября 2019

После получения всех данных формы в вашем штате у вас есть два варианта сделать запрос к бэкэнду.

Либо установите Content-Type As application/text, либо удалите header. 

fetch('http://localhost:5050/api/new/register',{
        method:'POST',
        headers : {'Content-Type': 'application/text'},
        body : {
            name:this.state.name,
            age:this.state.age,
            password:this.state.password,
            email:this.state.email
        },       
    })
0 голосов
/ 01 ноября 2019

Вы указали в заголовке, что отправляете в формате json при отправке. При отправке на сервер вы должны конвертировать в jsonString. 

fetch('http://localhost:5050/api/new/register', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name:this.state.name,
    age:this.state.age,
    password:this.state.password,
    email:this.state.email
  }),
});

Ok. Вы можете попробовать использовать Formdata

let formdata = new FormData();
      formdata.append("name", this.state.name);
      formdata.append("age", this.state.age);
      formdata.append("password", this.state.password);
      formdata.append("email", this.state.email);
fetch('http://localhost:5050/api/new/register', {
    method: 'POST',
    headers: {
      "Content-Type": "multipart/form-data"
    },
    body: formdata
})
.then(res => res.json())
.then(reponse => {
  console.log(reponse)
})
.catch(error => {
    console.error(error);
});
...