函数未定义 no-undef答案

【问题标题】：Function is not defined no-undef函数未定义 no-undef
【发布时间】：2020-05-22 06:26:28
【问题描述】：

您好，我是 jsx 的初学者，我正面临一个简单的错误，但我无法解决它我在我的应用程序 js 中编写了一个简单的删除功能，但我遇到了这个错误。

这是我的 App.js 文件

import React, { Component } from 'react';
import Essai from './Essai.js';
import AddEssai from './addEssai.js';


class App extends Component {
  state = {
    essais : [
      {name : 'pek', age: 30, sexe : 'f', id:'1'},
      {name : 'plop', age: 31, sexe : 'fh', id:'2'},
      {name : 'pekkrure', age: 35, sexe : 'h', id:'3'}
    ]
  }
  
  deleteEssai = (id) =>{
    console.log('fonction ok')
  } 
    
  
  render() {
    return (
      <div className="App">
       <h1>My first react app</h1>
       
       <Essai essai ={this.state.essais}/>
       <AddEssai deleteEssai = {this.deleteEssai} addEssai = {this.addEssai} />
      </div>
   )
    };
}

export default App;

这是我的组件

import React, { Component } from 'react';

const Essai = (props) => {
    
    //console.log(this.props.age)
    const { essai } = props;
    const essaiList = essai.map( essai => {
        return(
            <div className= "essai" key = {essai.id}>
                <div>Name: {essai.name} </div>
                <div>Age: {essai.age} </div>
                <div>sexe: {essai.sexe} </div>
                <button onClick = {() => {deleteEssai(essai.id)}}>DELETE</button>
            </div>
        )
    })
    return(
        <div className = "essaiList">
            {essaiList};
        </div> 
    )
    
}
export default Essai

我总是收到这个错误

./src/Essai.js 第 13:43 行：'deleteEssai' 未定义 no-undef

如果有人能花一点时间指导我，那就太好了，谢谢！！！

【问题讨论】：

请记住，如果其中一个答案对您有用，您可以使用灰色标记（勾号）图标将它们标记为答案。更多信息可以阅读this。

标签： reactjs jsx

【解决方案1】：

实际上您在子组件中使用了deleteEssai，但永远不要将它作为道具传递给它，所以它会抛出一个未定义的错误，因为那里没有这样的东西。您只需要将它作为道具传递给您的子组件。

像这样：

<Essai deleteEssai={this.deleteEssai} essai={this.state.essais}/>

那么你也需要在你的子组件中解构。

const { essai, deleteEssai } = props;

【讨论】：

【解决方案2】：

你应该看的两件事：

您没有将deleteEssai 作为道具传递给您<App /> 中的此组件<Essai />。

import React, { Component } from 'react';
import Essai from './Essai.js';
import AddEssai from './addEssai.js';


class App extends Component {
  state = {
    essais : [
      {name : 'pek', age: 30, sexe : 'f', id:'1'},
      {name : 'plop', age: 31, sexe : 'fh', id:'2'},
      {name : 'pekkrure', age: 35, sexe : 'h', id:'3'}
    ]
  }

  deleteEssai = (id) =>{
    console.log('fonction ok')
  } 


  render() {
    return (
      <div className="App">
       <h1>My first react app</h1>

       {/*                              ->>> Pass here*/}
       <Essai essai={this.state.essais} deleteEssai={this.deleteEssai}/>
       <AddEssai deleteEssai = {this.deleteEssai} addEssai = {this.addEssai} />
      </div>
   )
    };
}

export default App;

然后在 <Essai /> 你从 prop 中使用它：

import React, { Component } from 'react';

const Essai = (props) => {

    //console.log(this.props.age)
    // Desctructure 'deleteEssai' from props
    const { essai, deleteEssai } = props;
    const essaiList = essai.map( essai => {
        return(
            <div className= "essai" key = {essai.id}>
                <div>Name: {essai.name} </div>
                <div>Age: {essai.age} </div>
                <div>sexe: {essai.sexe} </div>
                <button onClick = {() => {deleteEssai(essai.id)}}>DELETE</button>
            </div>
        )
    })
    return(
        <div className = "essaiList">
            {essaiList};
        </div> 
    )

}
export default Essai;

【讨论】：