將數據提取到 State

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()中使用 function

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

這是我的Admin.js文件中的 state。

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

---

這工作正常，我從獲取的 API 調用中得到一組值，但是
我的問題：從外部文件導入 Axios function 時，如何將檢索到的數組設置為我的狀態（ setMyState ）？

Answer 1

在您的 UserAPI 中執行以下操作：

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

然后在您的管理員中：

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

 }).catch(error=>{
  })

});

Answer 2

你可以給你的 api 打電話 function

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

您正在獲取您的數據，但沒有在任何地方返回您的數據。 擺脫控制台日志並在您的 API 調用中添加return response 。

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

接下來，您將在 useEffect 中進行異步調用，以便您可以以這種方式構造函數。 這會將您的響應存儲在一個變量中，您將能夠設置您的 state

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

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

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