时间戳

首页 > 解决方案 > 错误：除非您的组件在 FirebaseAppProvider 中，否则无法调用 useFirebaseApp

reactjs - 错误：除非您的组件在 FirebaseAppProvider 中，否则无法调用 useFirebaseApp

问题描述

当我进入 createNewPost 页面时出现此错误，我不知道为什么，您能帮帮我吗？问题是什么？其他页面（主页和个人资料页面）没有任何问题。

（我研究过，但我找不到任何东西。）

错误：除非您的组件在 FirebaseAppProvider 中，否则无法调用 useFirebaseApp

我的 createNewPost 页面代码在这里：

const CreateNewPost = () => {
  const { user } = useAuth();
  const uid = firebase.auth().currentUser.uid;
  const postRef = useFirestore()
    .collection("users")
    .doc(uid)
    .collection("posts");

  const [post, setPost] = useState({
    content: "",
    imageURL: "",
  });

  const createPost = async () => {
    await postRef.add({
      content: post.content,
      imageURL: post.imageURL,
      timezone: dateFormat(),
    });
    setPost({ content: "", imageURL: "" });
  };

  return (
    <>
      <div className="container">
        <form>
          <div class="form-group">
            <div className="d-flex justify-content-start ">
              <div className="d-flex align-items-center">
                <img
                  className="rounded-circle py-2"
                  alt="profile"
                  src={user.photoURL}
                  style={{
                    maxHeight: "80px",
                    maxWidth: "80px",
                    marginBottom: "-17px",
                  }}
                />
                <h2 style={{ marginLeft: "7px", marginTop: "16px" }}>
                  {user.displayName}
                </h2>
              </div>
            </div>
            <hr></hr>
            <textarea
              class="form-control"
              id="exampleFormControlTextarea1"
              rows="23"
              placeholder="Enter a description..."
              onChange={(e) => setPost({ content: e.target.value })}
            ></textarea>
          </div>
        </form>
        <input
          class="form-control"
          type="text"
          placeholder="Enter the image link"
          style={{ marginTop: "7px" }}
          onChange={(e) => setPost({ imageURL: e.target.value })}
        ></input>
        <div className="d-flex justify-content-end">
          <button
            type="button"
            class="btn btn-primary btn-lg"
            style={{ marginTop: "3px" }}
            onClick={createPost}
          >
            Post
          </button>
        </div>
      </div>
    </>
  );
};

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

我像这样在 index.jsx 中使用了 Firebase 应用程序提供程序，我解决了：

ReactDOM.render(
  <FirebaseAppProvider firebaseConfig={firebaseConfig}>
   <App />
   </FirebaseAppProvider>

  ,
  document.getElementById('root')
);

推荐阅读