Object outside of Promise is empty

Question

I receive the data for the user object by an api call. Inside the getSelectedUser function, the console.log returns the filled user object. But in the console.log in the useEffect returns an empty object. What am I doing wrong?

Foo.tsx

  const [user, setUser] = useState<IUser>(initialUser);

  useEffect(() => {
    getSelectedUser();
    console.log(user);
  }, []);

  async function getSelectedUser() {
    await getUserById(userId).then((data) => {
      setUser(data);
      console.log(data);
    });
  }

Service.tsx

export const getUserById = async (userId: string | number) => {
  const user = ...;
  const token = ...;

  try {
    const response = await fetch(`${apiurl}/${userId}`, {
      method: 'GET',
      ...
    }).then((res) => res.json());
    return response;
  } catch (error) {
    console.log(error);
  }
};

if you use await , dont use .then () const response = await fetch(`${apiurl}/${userId}`, { method: 'GET', ... }) const response is your fetched data — Ilyes Elayeb, Aug 19 '21 at 13:49
a) it's asynchronous b) `const user` never changes, the update causes your render function to be called again with new values — Bergi, Aug 19 '21 at 13:49

score 1 · Accepted Answer · answered Aug 19 '21 at 13:48

Because state only has new value when component re-render. So you can put console.log(user); out side the useEffect to check like this:

  useEffect(() => {
    getSelectedUser();
  }, []);
  console.log(user);

Or you can use other useEffect with dependencies to check the value of new state when compoent re-render

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

Object outside of Promise is empty

1 Answers1