Function 未定義 no-undef

Question

嗨，我是 jsx 的初學者，我肯定會遇到一個簡單的錯誤，但我無法解決它我在我的應用程序 js 中編寫了一個簡單的刪除 function，我被困在這個錯誤上。

這是我的 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

如果有人可以花一點時間指導我，那將非常好，謝謝！！！！

Answer 1

實際上，您在子組件中使用deleteEssai ，但永遠不要將它作為道具傳遞給它，因此它會拋出一個未定義的錯誤，因為那里沒有這樣的東西。 您只需要將它作為道具傳遞給您的子組件。

像這樣：

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

然后你還需要在你的子組件中解構。

const { essai, deleteEssai } = props;

Answer 2

你應該看的兩件事：

1. 您沒有將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;

2. 然后在<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;