javascript - TypeError: this.props.ajouterRecette 不是函数

Question

****我是 React 的新手，我收到了这条错误消息，我按照教程做了同样的事情，但是在我的代码中它不起作用，为什么？**

**文件 App.js****

import React, { Component } from 'react' // CSS import './App.css' import Header from './components/Header' import Admin from './components/Admin' import Card from './components/Card' import recettes from './recettes'

//firebase import base from './base'

class App extends Component {   state = {
    pseudo: this.props.match.params.pseudo,
    recettes: {}   }  

  componentDidMount() {
    this.ref = base.syncState(`/${this.state.pseudo}/recettes`, {
      context: this,
      state: 'recettes'

    })   }

  componentWillUnmount() {
    base.removeBinding(this.ref)   }


  ajouterRecette = recette => {
    const recettes = { ... this.state.recettes}
    recettes[`recette-${Date.now()}`] = recette
    this.setState({recettes})
       }

  chargerExemple = () => this.setState({recettes})

  render () {
   ...
    )   } }

export default App

文件 AjouterRecette.js

 import React, { Component } from 'react'

    class AjouterRecette extends Component {   state = {
        nom: '',
        image: '',
        ingredients: '',
        instructions: ''   }


      handleSubmit = event => {
        event.preventDefault()
        const recette = { ...this.state }
        this.props.ajouterRecette(recette)
        // Reset
        Object.keys(recette).forEach(item => {
          recette[item] = ''
        })
        this.setState({ ...recette })   }

      render () {
        return (
          <div className='card'>
            <form className='admin-form ajouter-recette' onSubmit={this.handleSubmit}>

            </form>
          </div>
        )   } }

    export default AjouterRecette

我想解决这个错误请

TypeError: this.props.ajouterRecette 不是函数

标签： javascriptreactjs

Answer 1

您需要ajouterRecette作为道具传递给您的AjouterRecette组件，如下所示：

render() {
  <AjouterRecette ajouterRecette={this.ajouterRecette} />
}