无法从功能组件访问道具

Question

我目前在我的 React 项目中有一个提供者和上下文设置。上下文扩展了firebase。成分：

import React from 'react';

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext;

使用类组件，我可以像这样访问 firebase：

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

我的出口是这样的：

export default withFirebase(Admin);

通过这种方式，我可以在我的组件（管理员）中访问this.props.firebase和执行。

我的问题是我有一个功能组件，它是 Admin 的孩子的孩子。管理 -> 子组件 -> 子组件（这是一个）

在这里，我使用与上面相同的导入 withFirebase 并将导出包装在 withFirebase()

const MinistriesAdminForm = props => {

  const [ministries, setMinistries ] = useState([]);

  useEffect(() => {
    this.props.firebase.getMinistries(this.state.currentOrganization).on("value", data => {
    const ministriesObject = data.val();

    setMinistries(ministriesObject);

    });
  })
}

export default withFirebase(MinistriesAdminForm);

在上面我在 this.props.firebase 上得到一个错误我在这里做错了什么？

Answer 1

this.props 用于基于类的组件。

功能组件没有实例，props是一个常规参数。你应该像这样访问它props.firebase

  useEffect(() => {
    props.firebase.getMinistries(this.state.currentOrganization).on("value", data => {
    const ministriesObject = data.val();

    setMinistries(ministriesObject);

    }); 

this.state.currentOrganization也是无效的说法。如果它是由useState您提供的本地状态，则应该像普通变量一样访问

const [currentOrganization, setOrganization] = useState('foo')
/*...*/
props.firebase.getMinistries(currentOrganization)

或者如果currentOrganization来自props

props.firebase.getMinistries(props.currentOrganization)