Как правильно обновлять данные react после обращения к api?

В React для обновления данных после обращения к API можно использовать несколько подходов. Рассмотрим два наиболее распространенных способа: использование классовых компонентов и использование хуков.

1. Использование классовых компонентов:

Когда вы выполняете обращение к API, можно использовать методы жизненного цикла классовых компонентов для обновления данных. В следующем примере мы используем componentDidMount для выполнения запроса к API и обновления состояния компонента:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      error: null
    };
  }

  componentDidMount() {
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => this.setState({ error }));
  }

  render() {
    const { data, error } = this.state;

    if (error) {
      return <div>Error: {error.message}</div>;
    }
    
    if (!data) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {/* Render the data here */}
      </div>
    );
  }
}

В этом примере мы сначала инициализируем состояния data и error в конструкторе компонента. Затем мы используем componentDidMount для выполнения запроса к API. При успешном выполнении запроса мы обновляем состояние компонента с полученными данными. Если возникает ошибка, мы также обновляем состояние компонента с ошибкой.

2. Использование хуков:

В React 16.8 и выше можно использовать хуки для выполнения запросов к API и обновления данных. В следующем примере мы используем хук useEffect для выполнения запроса и обновления состояния компонента:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => setError(error));
  }, []); // Пустой массив зависимостей означает, что эффект будет выполнен только один раз при монтировании компонента

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* Render the data here */}
    </div>
  );
}

В этом примере мы используем хуки useState и useEffect. Мы используем useState для инициализации состояний data и error. В useEffect мы выполняем запрос к API и обновляем состояние компонента при успешном выполнении запроса или при возникновении ошибки.

Оба эти подхода позволяют обновить данные в React после обращения к API. Выбор между классовыми компонентами и хуками зависит от версии React, ваших предпочтений и требований вашего проекта.