Не могу сохранить данные тела запроса на публикацию - PullRequest
Новая
       19

Не могу сохранить данные тела запроса на публикацию

0 голосов
/ 17 октября 2019

У меня проблемы с сохранением данных из запроса на выборку с использованием Node.js и React.js. Я вызываю запрос на выборку из функции внутри класса компонента React. Я хочу запросить некоторый идентификатор пользователя из моей базы данных, а затем сохранить его в одной из переменных экземпляра компонента React, то есть «this.userid», однако, всякий раз, когда я присваиваю значение одной из пустых переменных, я проверяю его вне операторов «.then». Вы можете видеть, что это никогда не было назначено.

Кто-нибудь знает о беготне или правильном способе выполнения запроса на выборку? Я создаю простой запрос входа в систему и хочу сохранить идентификатор пользователя после его возвращения из API. 

class LandingPage extends React.Component {
constructor(props) {
    super(props) 
    this.data = data
}   
login(e){
    var that = this;
    function log(id){
       that.userid = id
    }
    fetch("/login", {
        method: "POST",
        headers: {
            'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
        body: JSON.stringify(this.data)
    }).then(response => {
        return response.json();
    })
    .then(json =>log(json.userid))
   /both show undefined
   console.log(that.userid, this.userid)  
   }

1 Ответ

0 голосов
/ 17 октября 2019

Вы проверяете данные за пределами тогдашнего объема. Там его нет, поэтому вам придется вызвать setState с полученными данными внутри .then ().

изменить .then(json =>log(json.userid)) на 

.then(json => {
  that.setState({userid: json.userid})
})

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

Обновление: альтернативно, вы можете использовать async await и построить его так: 

import React from 'react';

class MyComponent extends React.Component {

  state = {
    userId: null
  }

  useFetch = async e => {
    const raw = await fetch("/login", {
      method: "POST",
      headers: {
        'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.data)
    });

    const json = await raw.json();

    this.setState({
      userId:json
    }, () => console.log(this.state))
  }

  render() {
    if (this.state.userId === null)
      this.useFetch();
    return (
      <div>Loading some data</div>
    )
  }
}

export default MyComponent;

проверенный и рабочий компонент.

...