React：React-Firebase-Hooks 没有获得价值

Question

I am using this package React-Firebase-Hooks but I am not very sure how to properly use it.

In my code below, user.data().username is shown correctly but after putting it in useState , the username is not shown. What was not done correctly here?

const [user, loading, error] = useDocument(
  firebase.firestore().collection("users").doc(uid),
  {
    snapshotListenOptions: { includeMetadataChanges: true },
  }
);

const [username, setUsername] = useState(user && user.data().username);

return (
  <div className="flex">
    <div className="w-1/2">
      {user && (
        <div className="p-8">
          <div>{user.data().username}</div>
          <div>{username}</div>
        </div>
      )}
    </div>
    <div className="w-1/2">Box 2</div>
  </div>
);

Answer 1

The reason you are not getting the value on state because when the useState is initialized, user doesn't has a value, it's still loading. Since state is initialized only once, when the data from firebase loads, state doesn't changes.
You need to use a useEffect hook to watch for change in user, and setUsername then.

const [user, loading, error] = useDocument(
  firebase.firestore().collection("users").doc(uid),
  {
    snapshotListenOptions: { includeMetadataChanges: true },
  }
);

const [username, setUsername] = useState('');

useEffect(() => {
  if (user) {
    setUsername(user.data().username);
  }
}, [user])

return (
  <div className="flex">
    <div className="w-1/2">
      {user && (
        <div className="p-8">
          <div>{user.data().username}</div>
          <div>{username}</div>
        </div>
      )}
    </div>
    <div className="w-1/2">Box 2</div>
  </div>
);

This should work, if you face any issues, leave a comment.