Saya membuat aplikasi kecil di React dengan PokeAPI dan saya mengalami masalah dengan menggunakan metode splice() untuk menghapus elemen (pokemon) dari array (tim). Tidak peduli elemen mana yang saya pilih untuk dihapus, itu hanya menghapus elemen pertama dalam array.
Ini adalah fungsi -- yang diturunkan melalui alat peraga -- yang saya gunakan untuk menghapus item.
removePokemon = (index) => {
const team = [...this.state.team]
team.splice(index, 1)
this.setState({team})
}
Dan inilah komponen Tim yang sebenarnya digunakan.
import React, { Component } from 'react';
import Button from 'react-bootstrap/Button'
class Team extends Component {
render() {
return (
<div>
<h2>{this.props.trainer && <p>{this.props.trainer}'s Team</p>}</h2>
{this.props.team &&
<div>
{this.props.team.map((pokemon, i) => (
<div key={pokemon.id}>
<span className='cardHeader'>#{pokemon.id} - {pokemon.name}</span>
<img src={pokemon.sprites.front_default} alt={pokemon.name}/>
<Button onClick={this.props.removePokemon}>Remove from team</Button>
</div>
))}
</div>
}
</div>
);
}
}
export default Team;
2 jawaban
Anda tidak meneruskan argumen index
ke fungsi Anda removePokemon
:
Anda perlu mengedit satu baris:
<Button onClick={() => this.props.removePokemon(i)}>Remove from team</Button>
Karena Anda belum meneruskan index
sebagai argumen ke onClick={this.props.removePokemon}
.
index
di dalam removePokemon
metode merujuk objek acara. Jadi kodenya
team.splice(index, 1)
dievaluasi menjadi team.splice(eventObject, 1)
.
Itu sebabnya splice
menghapus elemen pertama dari array.
Anda dapat mengubah ke onClick={() => this.props.removePokemon(i)}
untuk menghapus elemen yang Anda inginkan.