reactjs - Firebase 和 React Hook(useState 和 useEffect)

Question

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

错误

Error: Invalid hook call.

代码

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

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

Answer 1

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

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
}

下面的钩子(Hook)将在初始化时运行，就像 componentDidMount 一样，如果你想改变它，你可以在effect钩子(Hook)的第二个参数中添加对数组的依赖项。 More info on that here