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的子代。管理员->子组件->子组件（这是一个）

在这里，我对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);

在上面，我在this.props.firebase上遇到错误我在这里做什么错了？

Answer 1

input::placeholder { @apply text-gray-900; }用于基于类的组件。

功能组件没有实例，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

无法从功能组件访问道具

1 个答案: