В Reactjs как получить данные с сервера либо из componentDidMount, либо из конструктора

Question

Я должен получить данные с сервера, чтобы отобразить страницу. В случае, если сервер не работает или загрузка данных по какой-то причине не удалась, у меня нет данных для отображения. Я мог показать, что сервер не работает. Мой вызов извлечения данных находится в componentDidMount здесь: -

async componentDidMount() {

    this.setState({ profiles: await CurdApi.getAllProfiles() });
}

Но render () вызывается перед componentDidMount. Поэтому я думаю вызвать CurdApi.getAllProfiles() из componentWillUnmount или из конструктора. Но componentWillUnmount устарел. Таким образом, вариант вызова из конструктора. Я новичок в Reactjs, поэтому я не знаю, рекомендуется ли вызывать любой API, который получает данные с сервера в конструкторе? Или есть другой способ?

Answer 1

async componentDidMount() {
 await CurdApi.getAllProfiles().then(resp=>{
    this.setState({ profiles: resp});
 })
}

Answer 2

Попробуйте что-то вроде этого

componentDidMount() {
this.apiCall()
}
...

const apiCall = () => {
this.setState({ profiles: await CurdApi.getAllProfiles() });
}

...

render() {
return(<div>{this.state.profiles ? this.state.profiles : null}</div>)
}

Answer 3

Я думаю, что вы имеете в виду componentWillMount, а не componentWillUnmount здесь, верно? Я бы порекомендовал использовать componentDidMount. Это способ реагирования, поэтому useEffect даже не поддерживает componentWillMount (не могу найти ссылку ...).

По сути, вам просто нужно заблокировать показ страницы при загрузке ваших данных:

...
async componentDidMount() {
    this.setState({ profiles: await CurdApi.getAllProfiles() });
}
....
render(){
   <>
     {state.profiles && <Profiles profiles={profiles} />}
   </>
}

Я бы порекомендовал вам использовать ловушки, но мне проще работать с крючками:

...

const [state, setState] = useState({});

const fetchProfiles = async() =>{
  setState({ profiles: await CurdApi.getAllProfiles()});
}

useEffect(()=>{
   fetchProfiles();
}, [])

return(
   <>
     {state.profiles && <Profiles profiles={profiles} />}
   </>
)
...

Answer 4

Всегда используйте mount для данных (или componentDidUpdate [хотя это немного сложнее])

Вы можете использовать конструктор для установки некоторых значений по умолчанию, но подайте в суд на ваше монтирование для извлечения данных. Используйте try catch для захвата ошибок. Перед рендерингом данных, пожалуйста, проверьте некоторые значения: есть ли ошибка? есть ли данные в профилях? есть ли состояние загрузки?

constructor(props) {
  super(props);
  this.state = {
    profiles: [],
    isLoading: true,
  }
}

async componentDidMount() {
  try {
    let profiles = await CurdApi.getAllProfiles();
    this.setState({ profiles, error: null, isLoading: false });
  } catch (error) {
    let error = error.message;
    this.setState({ error, isLoading: false });
  }
}

render(){
  return (
    <React.Fragment>
      {this.state.isLoading && <Spinner />}
      {this.state.error && <p>this.state.error</p>}
      {this.state.profiles.map(profile => <Profile key={profile.key} {...profile} >)}
    </React.Fragment>
  )
}