Question

我正在使用PokeAPI在React中制作一个小型应用程序，并且在使用splice（）方法从数组（团队）中删除元素（口袋妖怪）时遇到问题。无论我选择删除哪个元素，它都只会删除数组中的第一个元素。

这是功能-通过道具向下传递-我正在使用该功能来删除该项目。

removePokemon = (index) => {
  const team = [...this.state.team]
   team.splice(index, 1)
   this.setState({team})
  }

这是实际使用的Team组件。

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;

Answer 1

您不会将参数index传递给函数removePokemon：

您需要编辑一行：

<Button onClick={() => this.props.removePokemon(i)}>Remove from team</Button>

Answer 2

由于您尚未将index作为参数传递给onClick={this.props.removePokemon}。

index方法内的

removePokemon引用事件对象。因此，代码

team.splice(index, 1)的值为team.splice(eventObject, 1)。

这就是splice要删除数组的第一个元素的原因。

您可以更改为onClick={() => this.props.removePokemon(i)}删除所需的元素。

为什么拼接方法只删除React中的第一个数组索引？

2 个答案: