Discussion on: Calling and Consuming APIs with Mantine in ReactJS #3

[Adrian Berger]

This doesn't seem to work for me.

This part doesn't always return the random user:
const [userData, setUserData] = useState([])

const loadUserData = useCallback(async () => {
setUserData(await fetchRandomUser())
}, [])

useEffect(() => {
loadUserData()
console.log(userData);
}, [loadUserData])

Most of the time the array is empty.
Any ideas? Is there a working examples in a gist or something?

[Sam Preston]

Are you importing the fetchRandomUser function from a separate api.js file or is the function contained within the component?

[Adrian Berger]

Just like in your example from a separate file:
import { fetchRandomUser } from './api/User';

[Sam Preston]

And you have the function being exported as so?

export async function fetchRandomUser() {
  return await axios.get('https://randomuser.me/api/')
    .then((response) => {
      // console.log(response.data);
      return response.data
    })
    .catch((error) => {
      console.log(error)
    })
}

[Adrian Berger]

Yes