Reactjs Firebase和React挂钩（useState和useEffect）

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

错误

错误：无效的钩子调用

代码

---

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

我假设上面提供的函数是函数

组件中的
方法

然后，
useState
应该位于组件中的方法之外

const yourComponent = () => {

const [displayName, setDisplayName] = useState("Jane Doe");

const GetUserDisplayName = (userId)  => {
  db.collection("users")
    .doc(userId)
    .get()
    .then(doc => {
      setDisplayName(doc.data().displayName);
    });
  return displayName;
 }

return <p> INSERT JSX HERE</p>

}

constyourcomponent=（）=>{
const[displayName，setDisplayName]=useState（“Jane Doe”）；
const GetUserDisplayName=（userId）=>{
数据库收集（“用户”）
.doc（用户ID）
.get（）
。然后（doc=>{
setDisplayName（doc.data（）.displayName）；
});
返回显示名；
}
return在此处插入JSX

}
您发布的是一个方法，而不是自定义挂钩。按照惯例，所有钩子都以单词“use”开头。如果你想在钩子中激发效果，你必须在自定义钩子中使用useffect钩子

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一样，如果您想更改，可以在effect钩子的第二个参数中向数组添加依赖项
 尝试使用
useffect
hook


import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
函数useDisplayName（用户ID）{
const[displayName，setDisplayName]=useState（“Jane Doe”）；
useffect（（）=>{
数据库收集（“用户”）
.doc（用户ID）
.get（）
。然后（doc=>{
setDisplayName（doc.data（）.displayName）；
});
}，[userId]）；
返回显示名；
}
函数App（）{
const displayName=useDisplayName（“您的ID”）；
返回{displayName}；
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

将代码块放入
尝试
捕获
并检查错误？该功能是否在功能组件内？为什么
useState
hook在该函数中？您打算在mount上调用firebase还是响应用户的操作（如单击按钮）？下面techGuru的答案是前者，我的答案是后者。我试图用用户名填充dom，用户名存储在用户集合中。这不需要用户操作。是否假定
GetUserDisplayName
是一个功能组件？它可以是
功能组件内部的
方法
？钩子只在功能组件中工作，不能在类组件中使用钩子。在类组件中，您可以使用常规的生命周期方法。我知道，但我要说的是，问题中提到的函数可以是功能组件中的方法吗？不是主要组件功能组件是功能。为什么要用一个多余的
GetUserDisplayName
函数方法来包装它？只需在功能组件中的useEffect钩子中调用firebase即可。@Josh Pittman看起来好像声明了“unsubscribe”，但从未使用过？如果您不想使用任何生命周期方法，这个答案是完美的。例如，如果您希望获取数据以响应按钮单击或其他操作。我假设这个问题是在一个生命周期方法的上下文中，否则就根本不需要使用钩子。这只是一个简单的函数方法。谢谢你的解释，我对Firebase不太熟悉，所以我只是在谷歌上搜索一下，我完全同意你的观点！！！
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
}