父组件未将 Firebase 道具传递给子组件答案

【问题标题】：Parent Component not Passing Firebase props to Child Component父组件未将 Firebase 道具传递给子组件
【发布时间】：2020-09-01 00:38:34
【问题描述】：

我有一个父组件，我已经在其中初始化了一个 Firebase 实例，我需要在一个子组件中提交一个表单，它需要初始化的 Firebase 道具并将数据提交到云 Firestore。我的问题是，每当我尝试在子组件中提交表单详细信息时，我都会收到错误 Cannot read property 'firebase' of undefined

请查看下面我初始化 Firebase 道具以及将道具传递给子组件的代码：

import { withFirebase } from "../../utils/Firebase";

const SignUpDetail = (props) => {
 const renderSwitch = (id) => {
  switch (id) {
   case "subscribe":
    return <Subscribe {...props} />;
   case "finish":
    return <FinishSetup {...props} />;
   default:
    return null;
 }
};
}
export default withRouter(withFirebase(SignUpDetail));

这是我在父级按钮上使用的方法****editted****

const handleSignUp = (event) => {
props.firebase
  .doCreateUserWithEmailAndPassword(
    formState.values.email,
    formState.values.password
  )
  .then((authUser) => {
    return props.firebase.user(authUser.user.uid).set(
      {
        email: formState.values.email,
        policy: formState.values.policy,
        subscribe: formState.values.subscribe,
      },
      { merge: true }
    );
  })
  .then(() => {
    setFormState({ ...formState });
  })
  .catch((error) => {
    console.log("error: " + error);
  });

event.preventDefault();
};

然后在我的子组件中，这是我接收道具的地方

const Subscribe = ({ props }) => {
  const handleUpdate = (event) => {
   event.preventDefault();
   props.firebase
  .doCreateUserWithEmailAndPassword(
    formState.values.email,
    formState.values.password
  )
  .then((authUser) => {
    // Create a user in your Firebase realtime database

  })
  .catch((error) => {
    console.log("error: " + error);
  });
};
}

如果我从父母那里拨打任何 frebase 电话，它可以工作，但如果我从孩子那里拨打任何电话，它就不起作用，我会收到此错误。如果我能得到帮助，我将不胜感激。

【问题讨论】：

你能举例说明你是如何从父母那里拨打电话的吗？
@AsifM 我已经更新了我的问题。我使用一种方法来调用 firebase 实例，并在其中保存保存到 firebase。

标签： javascript reactjs firebase firebase-realtime-database google-cloud-firestore

【解决方案1】：

我创建了一个 Firebase 上下文，我在其中启动了一个 Firebase 实例，并且每当我在子组件中需要该实例时，我都会对其进行引用，并且可以毫无问题地使用它。在这种情况下，我不需要将 Firebase 实例作为道具传递。

【讨论】：

【解决方案2】：

你确定你正确传递了道具吗？

console.log(props) 得到什么在子组件中？

【讨论】：

我已经改变了整个流程，所以我不再有这些代码来记录道具。我已经用新流程解决了它。但是，如果您能帮助我，我在这里有一个新问题stackoverflow.com/questions/61839354/…。