reactjs - Firebase和React Hooks(useState和useEffect)

我对react钩子有基本的用法，但似乎失败了。

错误


  错误：无效的挂钩调用。


码

function GetUserDisplayName(userId) {
  const [displayName, setDisplayName] = useState("Jane Doe");
  db.collection("users")
    .doc(userId)
    .get()
    .then(doc => {
      setDisplayName(doc.data().displayName);
    });
  return displayName;
}

注意，即使没有db调用，它也无法简单地返回默认的displayName。

最佳答案

您发布的是一种方法，而不是自定义钩子。按照惯例，所有钩子都以“ use”一词开头。如果要在钩子中触发效果，则必须在自定义钩子中使用useEffect钩子。

import React, { useState, useEffect } from 'react';

function useDisplayName(userId) {
  const [displayName, setDisplayName] = useState("Jane Doe");

  useEffect(() => {
    db.collection("users")
    .doc(userId)
    .get()
    .then(doc => {
      doc.exists &&
      doc.data().displayName &&
      setDisplayName(doc.data().displayName);
    });
  }, []);

  return displayName
}

如果要更改，以下挂钩将在初始化时运行，例如componentDidMount，您可以在效果挂钩的第二个参数中向数组添加依赖项。 More info on that here

关于reactjs - Firebase和React Hooks(useState和useEffect)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59081574/