Question

我对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。

Answer 1

我假设上面提供的功能是功能component中的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> }应该在组件中方法的外部。

{{1}}

Answer 2

您发布的是方法，而不是自定义钩子。按照惯例，所有挂钩都以“ 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

Answer 3

尝试使用useEffect钩子

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

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

  return displayName;
}

function App() {
  const displayName = useDisplayName("Your ID");
  return <div>{displayName}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Firebase和React Hooks（useState和useEffect）

3 个答案: