Извлеченные данные в состояние

Question

UserAPI.js Это то, что я экспортирую в Admin.js

     export const getAllEmailsFromConfirmedUsers = () => { Axios.get('http://localhost:8080/users/confirmedusers')
     .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }

Admin.js - Как я импортируювызов API.

import {getAllEmailsFromConfirmedUsers} from '../../shared/api/UserAPI'

Admin.js - затем я использую функцию внутри useEffect()

  useEffect(() => {
    getAllEmailsFromConfirmedUsers();
  });

Это мое состояние внутри моего Admin.js file.

  const [myState, setMyState] = useState([]);

---

Это отлично работает, и я получаю массив значений обратно из вызова API, но мой вопрос: Как я могу установить полученный массив в свое состояние ( setMyState ) при импорте функции Axios из внешнего файла?

Answer 1

В вашем UserAPI сделайте это:

export const getAllEmailsFromConfirmedUsers = () => { 
 return Axios.get('http://localhost:8080/users/confirmedusers')
  }

Затем в вашем Admin:

useEffect(() => {
 getAllEmailsFromConfirmedUsers().then({
//Do Your update here

 }).catch(error=>{
  })

});

Answer 2

Вы можете сделать обратный вызов вашей функции вызова API

export const getAllEmailsFromConfirmedUsers = (saveData) => { 
 Axios.get('http://localhost:8080/users/confirmedusers')
     .then(function (response) {
      if(response){
        saveData(response)
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }

и в вашем компоненте:

useEffect(() => {
  getAllEmailsFromConfirmedUsers(setMyState);
});

Answer 3

Вы получаете свои данные, но нигде не возвращаете их. Избавьтесь от журналов консоли и добавьте return response в вызовы API.

   export const getAllEmailsFromConfirmedUsers = () => { Axios.get('http://localhost:8080/users/confirmedusers')
     .then(response => response)
     .catch(err => err);
  }

Далее вы будете выполнять асинхронный вызов внутри useEffect, чтобы вы могли структурировать свои функции таким образом. Это сохранит ваш ответ в переменной, и вы сможете установить свое состояние

const [myState, setMyState] = useState([]);

useEffect(() => {
    async function fetchMyData() {
        return await getAllEmailsFromConfirmedUsers();
    }

    let myEmails = fetchMyData()
    setMyState(myEmails)
}, [])