Передача значения переменной из конструктора реагирования в nodeJS бэкэнд - PullRequest
Новая
       21

Передача значения переменной из конструктора реагирования в nodeJS бэкэнд

1 голос
/ 27 февраля 2020

Можно ли отправить значения переменных из конструктора реагирования в nodejs бэкэнд. Мы хотим опубликовать определенные данные по мере загрузки страницы в nodejs и выполнять некоторую функцию в бэкэнде. 

constructor(props) {
        super(props);
        const tokenFetch = localStorage.getItem("JWT");
        const nameFetch = localStorage.getItem("Name");
        this.state = {
            userLoggedIn,
            name: nameFetch,
            tokenFetch: tokenFetch
        };
}

здесь, в конструкторе, мы хотим публиковать name и tokenFetch в бэкэнд.

1 Ответ

0 голосов
/ 27 февраля 2020

Решение о том, следует ли отображать некоторые элементы на основе ответа от HTTP-запроса в constructor, является плохой идеей. Вы не хотите, чтобы ваша страница зависала, потому что запрос занимает больше времени, чем вы ожидали.

Вместо этого вы должны добавить флаг boolean к состоянию в constructor, и на основе этого флага отображаются элементы, которые вы хотите или не хотите отображать. Затем вы можете выполнить свой HTTP-запрос в методе componentDidMount, а затем изменить флаг: 

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    const tokenFetch = localStorage.getItem("JWT");
    const nameFetch = localStorage.getItem("Name");
    this.state = {
      responseFromServerReceived: false,
      userLoggedIn,
      name: nameFetch,
      tokenFetch: tokenFetch
    };
  }

  componentDidMount() {
    axios({
      method: 'post',
      url: '/whereYouWantToSendData',
      data: { firstName: this.state.nameFetch, token: this.state.tokenFetch }
    }).then(response => {
      // Whatever you want to do with the response;
      this.setState({ responseFromServerReceived: true });
    });
  }

  render() {
    const elementToRender = this.state.responseFromServerReceived
      ? <h1>Hello, the response of the server was received.</h1>
      : <h1>Hello, the response of the server was NOT received yet.</h1>;

    return (
      <div>
        {elementToRender}
      </div>
    );
  }
}
...