componentDidMount не отправляет данные после установки состояния

Question

Я декодирую токен, чтобы получить адрес электронной почты текущего пользователя, устанавливаю его в состояние facultyEmail и отправляю его бэкэнду, чтобы получить ответ. Но facultyEmail пуст, потому что componentDidMount является асинхронным, он работает за пределами componentDidMount (), но я не знаю способа обработать запрос на получение axios с параметрами вне componentDidMount. У меня нет события для его вызова. Спасибо за помощь

componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  this.setState({
    facultyEmail: decoded.email
  });

  axios
    .get("faculty/Course", {
      params: {
        facultyEmail: this.state.facultyEmail
      }
    })
    .then(res => {
      this.setState({
        class: res.data
      });
    })
    .catch(err => {
      console.log(err);
    });
  console.log("courses", this.state.facultyEmail);
}

Answer 1

setState является асинхронным.Вы должны использовать обратный вызов setState или async / await

• , используя callback

componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  this.setState({
    facultyEmail: decoded.email
  }, () => {
    axios
      .get("faculty/Course", {
        params: {
          facultyEmail: this.state.facultyEmail
        }
      })
      .then(res => {
        this.setState({
          class: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
    console.log("courses", this.state.facultyEmail);
  });
}

• используя async / await

async componentDidMount() {
  try {
    const token = localStorage.usertoken;
    const decoded = jwt_decode(token);
    await this.setState({
      facultyEmail: decoded.email
    });

    const res = await axios.get("faculty/Course", {
      params: {
        facultyEmail: this.state.facultyEmail
      }
    })

    this.setState({
      class: res.data
    });
    console.log("courses", this.state.facultyEmail);
  } catch (err) {
    console.log(err);
  }
}

Answer 2

Почему бы просто не сохранить facultyEmail в памяти до 2-го setState, избегая первого?Вызов axios является асинхронным, поэтому вам нужно поместить console.log в функцию render (и вы должны регистрировать его только после того, как он действительно будет в состоянии).

componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  const facultyEmail = decoded.email;

  axios
    .get("faculty/Course", { params: { facultyEmail } })
    .then(res => { this.setState({ class: res.data, facultyEmail }); })
    .catch(err => { console.log(err); });
}

render() {
  if (this.state.facultyEmail) console.log("courses", this.state.facultyEmail);

  return ();
}

Answer 3

Вы используете ту же электронную почту, которую используете в setState для выполнения вызова API, нет необходимости в двух setStates. Это может вызвать у нас аномалии и не является рекомендуемой практикой. Вы можете сделать это двумя способами:

Путь 1 :

componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  axios.get("faculty/Course", {
    params: {
      facultyEmail: decoded.email
    }
  }).then(res => {
    this.setState({
      class: res.data,
      facultyEmail: decoded.email
    });
  }).catch(err => {
    console.log(err);
  });
}

render() {
  console.log(this.state.class, this.state.facultyEmail);
  // This will have the values from setstate triggered inside axios.
  return(
    <div> Sample </div>
  )
}

Альтернативный подход:

loadDataFromApi(email) {
  axios.get("faculty/Course", {
    params: {
      facultyEmail: email
    }
  }).then(res => {
    this.setState({
      class: res.data
    });
  }).catch(err => {
    console.log(err);
  });
}

componentDidMount() {
  const token = localStorage.usertoken;
  const decoded = jwt_decode(token);
  this.setStats({
   facultyEmail: decoded.email
  }, () => {
     // The callback function would reflect the updated email.
     this.loadDataFromApi(this.state.facultyEmail);
  });
}