Question

我有一个父组件，我已经在其中初始化了Firebase实例，我需要在子组件中提交一个表单，该组件中需要使用已初始化的Firebase道具并将数据提交到Cloud Firestore。我的问题是，每当我尝试在子组件中提交表单详细信息时，都会出现错误无法读取未定义的属性'firebase'

请在下面查看我的代码，其中我已经初始化了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));

这是我在父级按钮上使用的方法，该方法有效****编辑

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调用，都可以，但是如果我从子级进行任何调用，它都将不起作用，并且会出现此错误。如果能得到帮助，我将不胜感激。

Answer 1

我创建了一个Firebase上下文，在其中启动了Firebase的一个实例，只要我在Child组件中需要该实例，就可以对其进行引用，并且可以毫无问题地使用它。在那种情况下，我不需要通过Firebase实例作为道具。

Answer 2

确定要正确传递道具吗？

console.log(props)的好处在子组件中？

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

2 个答案: