时间戳

首页 > 解决方案 > 绑定 this 但仍然得到 setState is not a function

reactjs - 绑定 this 但仍然得到 setState is not a function

问题描述

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

火力基地文件：

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

你知道出了什么问题吗？非常感谢。

标签： reactjsreact-native

解决方案

类 Firebase 不扩展 React.component 所以它不知道什么是状态。这是预期的，扩展 React.component 或使用状态挂钩 useState()。

推荐阅读