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;
1
Atarius Armstrong 28 Mei 2019, 18:15

2 jawaban

Jawaban Terbaik

Anda tidak meneruskan argumen index ke fungsi Anda removePokemon:

Anda perlu mengedit satu baris:

<Button onClick={() => this.props.removePokemon(i)}>Remove from team</Button>
1
Andrii Golubenko 28 Mei 2019, 15:25

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.

1
anonymous 28 Mei 2019, 15:41