React UseEffect fetch not functioning

Question

I have a service that returns an array of records in 'res'. Works great in my REACT components. I need to retrieve the same data in a function but I think my syntax is wrong as I get no data.

Here is the code for the service: ...

import axios from 'axios';
import * as myConstants from '../Services/User_API_Base_URL'
class UserService {
    getUsers(){
        return axios.get(myConstants.USER_API_BASE_URL + "users");
    }
}
export default new UserService()

...

Here is the code in a Component that works great: ...

componentDidMount= async (event)=>{
  UserService.getUsers().then((res) => {
        this.setState({ users: res.data});
    });  
  }

...

Here is the code in the Function that does not appear to get anything into 'datau' ...

const [datau, setDatau] = useState([]);
  useEffect(() => {
    const doFetchuser = async () => {
      setDatau(UserService.getUsers())
    };
    doFetchuser();
  }, []);

...

Any help getting this to work would be greatly appreciated. I am just starting to get familiar with Functions\Hooks, etc.

Rob

here's an example of async/await for a useEffect calling an API https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret — Nikki9696, Jan 25 '22 at 18:32
Please try replacing: `const doFetchuser = async () => { setDatau(UserService.getUsers()) };` with: `const doFetchuser = async () => { const res = await UserService.getUsers(); setDatau(res.data) };`. Or, this: `const doFetchuser = async () => { UserService.getUsers().then(res => setDatau(res.data)) };` — jsN00b, Jan 26 '22 at 04:29

score 0 · Answer 1 · answered Jan 26 '22 at 13:25

0

Thank you to @jsNOOb:

Here is the working code

const [data, setData] = useState([]);
  useEffect(() => {
    const doFetch = async () => { const res = await UserService.getUsers(); 
      setData(res.data) };
    doFetch();
  }, []);

answered Jan 26 '22 at 13:25

HighwayRob

119
2
11

React UseEffect fetch not functioning

1 Answers1