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

【问题标题】：React: React-Firebase-Hooks not getting valueReact：React-Firebase-Hooks 没有获得价值
【发布时间】：2021-06-21 03:38:32
【问题描述】：

我正在使用这个包React-Firebase-Hooks，但我不太确定如何正确使用它。

在我下面的代码中，user.data().username 正确显示，但将其放入 useState 后，用户名未显示。这里有什么不正确的地方？

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>
);

【问题讨论】：

这里为什么需要一个useState？
@VaibhavVishal 我将添加一个允许用户更改用户名的输入字段。
好的。顺便说一句，如果您将用户名的值置于状态中，则仅更改状态不会更改 firebase 上的值。您还需要更新 firebase 文档。
@VaibhavVishal 是的，我知道

标签： javascript reactjs google-cloud-firestore react-hooks next.js

【解决方案1】：

您没有获得状态值的原因是，当 useState 初始化时，user 没有值，它仍在加载。由于状态仅初始化一次，因此当来自 firebase 的数据加载时，状态不会改变。
您需要使用 useEffect 挂钩来观察用户的变化，然后setUsername。

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>
);

这应该可行，如果您遇到任何问题，请发表评论。

【讨论】：