Как вызвать Api после данных userDetails в React

Question

У меня есть одна проблема, как я могу вызвать apis после получения userDetails. поэтому у меня есть один apis, который вызывает, когда пользователь перезагружает страницу, его вызов userDetails apis, где мы можем получить данные из базы данных.

, поэтому, как только данные извлекаются из базы данных, мне нужно вызвать другой интерфейс API на основе userDetails. но userDetails API вызывает из auth.js, и я должен проверить на страницах serval, если userDetails там, а затем вызвать другие API.

есть ли шанс для всех других API после получения сведений о пользователе.

Я пробовал много решений, но оно не работает.

Я пытаюсь установить async и await в componentdidmount, но та же самая проблема связана с ошибкой userDetails null.

Я добавил что-то вроде этого,

async componentDidMount() { if(this.props.userDetails !== null ) { ... others apis..}

}

но у меня не работает.

Спасибо

Answer 1

Пожалуйста, попробуйте следующий код в вашем app.js

import React from 'react';
import './main.css';
import Modal from './components/Modal/modal';

class App extends React.Component {
  state = {
    showModal1: false,
    showModal2: false
  };

  showModal = x => {
    this.setState({
      [x]: !this.state[x]
    });
  };

  render() {
    return (
      <div>
        <div className="button-container">
          <button className="toggle-button" onClick={x => {
            this.showModal(showModal1);
          }}>Show yourself Modal 1!</button>
        </div>
         <div className="button-container">
          <button className="toggle-button" onClick={x => {
            this.showModal(showModal2);
          }}>Show yourself Modal 2!</button>
        </div>
        <Modal onClose={this.showModal} show={this.state.show1} title="Test modal 1" id="1">Lorem ipsum</Modal>
        <Modal onClose={this.showModal} show={this.state.show2} title="Test modal 2" id="2">I am a different modal</Modal>
      </div>
    );
  }
}

export default App;

Answer 2

Проверьте реквизиты userDetails в componentDidUpdate, изменилось ли оно или нет. Поэтому вы не будете вызывать обновления компонента API каждый раз.

componentDidUpdate (prevState, prevProps) {if (this.props.userDetails! == prevProps.userDetails) {... others apis ..}}