Reactjs 绑定此文件，但仍然获取setState不是一个函数

我在两个文件中有两个组件：Firebase和Recipe。我从Firebase文件调用Recipe函数createRecipe。 当我调用this.setState（{recipies}）时，会发生一个错误。我搜索了一个解决方案，并尝试根据此处绑定上下文

Firebase文件：

class Firebase {
  constructor () {
    app.initializeApp(config)
    
    // TRIED
    this.createRecipe = this.createRecipe.bind(this)
    
    this.auth = app.auth()
    this.db = app.database()
  }

  state = {
    recipies: {}
  }

  createRecipe = recipe => {
    const recipies = {...this.state.recipies}
    recipies[`recipe-${Date.now()}`] = recipe
    this.setState({ recipies })
  }
}

export default Firebase

import { withAuthorization } from '../Session'
import { withFirebase } from '../Firebase'

class Recipe extends Component {

  state = {
    name: '',
    image: '',
    ingredients: '',
    instructions: ''
  }

  handleChange = event => {
    const { name, value } = event.target
    this.setState({ [name]: value })
  }

  handleSubmit = event => {
    event.preventDefault()
    const recipe = { ...this.state }
    // TRIED
    this.props.firebase.createRecipe(recipe)
    this.props.firebase.createRecipe(recipe).bind(this)
    
    this.resetForm(recipe)
  }

  render () {
    return (
      <div>
        <div className='card'>
          <form
            // TRIED
            onSubmit={this.handleSubmit>
            onSubmit={() => this.handleSubmit>
            onSubmit={this.handleSubmit.bind(this)}>
            
            <input value={this.state.name} type='text' name='nom' onChange={this.handleChange} />
            <input value={this.state.image} type='text' name='image' onChange={this.handleChange} />
            <textarea value={this.state.ingredients} rows='3' name='ingredients' onChange={this.handleChange} />
            <textarea value={this.state.instructions} rows='15' name='instructions' onChange={this.handleChange} />
            <button type='submit'>Add recipe</button>
          </form>
        </div>
      </div>
    )
  }
}

const condition = authUser => !!authUser

export default withAuthorization(condition)(withFirebase(Recipe))

配方文件：

class Firebase {
  constructor () {
    app.initializeApp(config)
    
    // TRIED
    this.createRecipe = this.createRecipe.bind(this)
    
    this.auth = app.auth()
    this.db = app.database()
  }

  state = {
    recipies: {}
  }

  createRecipe = recipe => {
    const recipies = {...this.state.recipies}
    recipies[`recipe-${Date.now()}`] = recipe
    this.setState({ recipies })
  }
}

export default Firebase

import { withAuthorization } from '../Session'
import { withFirebase } from '../Firebase'

class Recipe extends Component {

  state = {
    name: '',
    image: '',
    ingredients: '',
    instructions: ''
  }

  handleChange = event => {
    const { name, value } = event.target
    this.setState({ [name]: value })
  }

  handleSubmit = event => {
    event.preventDefault()
    const recipe = { ...this.state }
    // TRIED
    this.props.firebase.createRecipe(recipe)
    this.props.firebase.createRecipe(recipe).bind(this)
    
    this.resetForm(recipe)
  }

  render () {
    return (
      <div>
        <div className='card'>
          <form
            // TRIED
            onSubmit={this.handleSubmit>
            onSubmit={() => this.handleSubmit>
            onSubmit={this.handleSubmit.bind(this)}>
            
            <input value={this.state.name} type='text' name='nom' onChange={this.handleChange} />
            <input value={this.state.image} type='text' name='image' onChange={this.handleChange} />
            <textarea value={this.state.ingredients} rows='3' name='ingredients' onChange={this.handleChange} />
            <textarea value={this.state.instructions} rows='15' name='instructions' onChange={this.handleChange} />
            <button type='submit'>Add recipe</button>
          </form>
        </div>
      </div>
    )
  }
}

const condition = authUser => !!authUser

export default withAuthorization(condition)(withFirebase(Recipe))

从“../Session”导入{withAuthorization}
从“../Firebase”导入{withFirebase}
类配方扩展组件{
状态={
名称：“”，
图像：“”，
成分：''，
说明：“”
}
handleChange=事件=>{
常量{name，value}=event.target
this.setState（{[name]：value}）
}
handleSubmit=事件=>{
event.preventDefault（）
const recipe={…this.state}
//尝试
this.props.firebase.createRecipe（配方）
this.props.firebase.createRecipe（recipe）.bind（this）
此.resetForm（配方）
}
渲染（）{
返回(
onSubmit={（）=>this.handleSubmit>
onSubmit={this.handleSubmit.bind（this）}>
添加配方
)
}
}
const condition=authUser=>！！authUser
使用授权（条件）导出默认值（使用Firebase（配方））

---

您知道哪里出了问题吗？非常感谢。

您没有在Firebase组件中使用react

如何修复：

import React, {Component }from 'react';

class Firebase extends Component {
 constructor(props){
    super(props)  
    // your code
}
// your code

render(){
   return null; // this won't change anything on your UI
}

}

---

Firebase类不扩展React.component，因此它不知道状态是什么。这是预期的，请扩展React.component或使用状态挂钩useState（）.

class Firebase没有扩展React.component，所以它不知道状态是什么。这是预期的。所以盲目…谢谢@Satheesh，你能把它作为一个简短的答案添加吗？我想验证你的答案。我们都去过：-）