Правильный способ передать вызовы API в приложении MERN (клиент React)? - PullRequest
Новая
       7

Правильный способ передать вызовы API в приложении MERN (клиент React)?

0 голосов
/ 16 апреля 2020

Я пытаюсь передать несколько вызовов API ios в рамках приложения React / MERN. Мне нужно сделать запрос GET к серверу при запуске клиента (в useEffect ()). Я переместил свою функцию ax ios во внешний файл в папках клиента React и экспортировал ее. При тестировании с console.log, сама функция, кажется, работает, так как получает правильные данные. Однако, когда я пытаюсь использовать возвращаемое значение этой функции в хуке useEffect () клиента, я получаю undefined или Promise (который не может быть дочерним элементом React).

Вот мой текущий код:

Приложение. js

const [response, setResponse] = useState('Loading...');

useEffect(() => {
  setResponse(helloMessage());
}, [])

CallAPI. js

const helloMessage = () => {
    axios.get('http://localhost:5000/')
        .then(res => {
            return res.data.message;
        })
        .catch(() => {
            return 'Server not responding. Start the server and refresh this page.';
        })
    }

Экспорт и импорт и т. Д. c. правильно на месте. Моя единственная проблема, вероятно, в этом случае - синтаксис async / await (я уверен, что проблема здесь). Как правильно выполнить вызов API с использованием функции во внешнем файле, чтобы установить состояние для useEffect ()?

1 Ответ

1 голос
/ 16 апреля 2020

Вы должны сделать звонок, а в обратном вызове изменить состояние. 

const [response, setResponse] = useState('Loading...');

useEffect(() => {
  helloMessage().then(res =>
   setResponse(res);
  )
}, [])

и нужно вернуть обещание от helloMessage

const helloMessage = () => {
    return axios.get('http://localhost:5000/')
        .then(res => {
            return res.data.message;
        })
        .catch(() => {
            return 'Server not responding. Start the server and refresh this page.';
        })
    }
...