相关疑难解决方法(0)

我正在使用Preact(用于所有意图和目的,React)来呈现项目列表,保存在状态数组中.每个项目旁边都有一个删除按钮.我的问题是:当点击按钮时,删除了正确的项目(我多次验证了这一点),但是重新渲染了项目,最后一个项目丢失,删除的项目仍在那里.我的代码(简化):

import { h, Component } from 'preact';
import Package from './package';

export default class Packages extends Component {
  constructor(props) {
    super(props);
    let packages = [
      'a',
      'b',
      'c',
      'd',
      'e'
    ];
    this.setState({packages: packages});
  }

  render () {
    let packages = this.state.packages.map((tracking, i) => {
      return (
        <div className="package" key={i}>
          <button onClick={this.removePackage.bind(this, tracking)}>X</button>
          <Package tracking={tracking} />
        </div>
      );
    });
    return(
      <div>
        <div className="title">Packages</div>
        <div className="packages">{packages}</div>
      </div>
    );
  }

  removePackage(tracking) {
    this.setState({packages: this.state.packages.filter(e => e !== tracking)});
  }
} …