Как вывести ответ от сервера на экран?

Question

    const axios = require('axios');
    const sendGetRequest = async () => {
    try {
        const res = await axios.get("http://192.168.1.100:5000/api/getProfile");
        console.log(props.state.getState().profile)
        props.state.setState({profile: res.data})
        console.log(props.state.getState().profile)

        return props.state.getState().profile

        
    } catch (err) {
       
        console.error(err);
    }
};

return (<p> {props.state.getState().profile}</p>);

Отправляю get запрос на API и помещаю ответ в state props.state.setState({profile: res.data}) . Пытаюсь получить значение из state в render {props.state.getState().profile} но получаю старое значение, как я понимаю необходимо обновить страницу но если я это делаю то приложение уходит в вечный цикл. Т.е. прогружает страницу отправляет запрос и обновляет страницу. Как правильно вывести значение помещенное в profile ?

Answer 1

Можно создать хук-стейт, далее в useEffect делаем запрос на сервер и сохраняем данныее в стейт. При обновлении стейта Реакт перересовывает изменённые данные. Получается примерно так:

import React from "react";
import axios from "axios";

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

  console.log(`state`, state);

  React.useEffect(() => {
    const sendGetRequest = async () => {
      try {
        const res = await axios.get("http://192.168.1.100:5000/api/getProfile");
        setState(res.data);
      } catch (err) {
        console.error(err);
      }
    };
    sendGetRequest();
  }, []);
  return <div>{state}</div>;
};

export default App;

БЛОГ НА HUSL

Как вывести ответ от сервера на экран?

Ответы (1 шт):