无法从功能组件访问道具

Question

我目前在我的 React 项目中有一个提供程序和上下文设置。 上下文扩展了火力基础。 元件：

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并执行。

我的问题是我有一个功能组件，它是管理员的孩子的孩子。 管理员 -> 子组件 -> 子组件(这个就是那个(

在这里，我与上述Firebase执行相同的导入 并将导出包装在 Firebase(( 中

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);

在上面，我在这个.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)