Javascript 从DOM中删除错误的组件

我有三个文件：ShopsContainer.js ShopsComponent.js和shopsitemccomponent.js

ShopsContainer在本地州维护一系列商店物品，这些物品作为道具传递给ShopsComponent。ShopsComponent然后通过作为道具接收的items数组进行映射，并为数组中的每个项目呈现ShopsSitemComponent

在我的ShopsContainer文件中，我有一个方法，可以使用以下代码从状态中删除商店项目：

removeShop = (shopAccount) => {
  this.setState(prevState => ({
    items: prevState.items.filter(shop => {
       return shop.shopAccount !== shopAccount
     })
  }));
}

发生这种情况时，正确的项目将从状态为的items数组中删除，但是，无论removeShop调用时DOM中的最后一个ShopItem是什么，都将被删除，无论该项目是否应该被删除。换句话说，当调用removeShop并正确更新状态为的items数组时，会从DOM中删除错误的ShopItemComponent

我希望发生的事情或我认为应该发生的事情是，当调用removeShop时，该商店将从状态中的items数组中删除，并且ShopsContainer重新渲染，从而导致ShopsComponent使用收到的更新道具重新渲染。最后，ShopsComponent将在道具中映射最新更新的items数组，为正确的项目显示一个` ShopItemComponent'。也许问题与道具的更新有关

我的代码如下：

ShopsContainer.js

ShopsComponent.js

---

您的代码运行得很好，但您只有一个错误，您的ShopComponent将索引指定为每个ShopItemComponent的键，react将跟踪这些索引以更新正确的组件，因此您需要将键设置为项目之间的唯一值，然后我意识到shopAccount应该是每个项目的id

解决方案代码如下所示

class ShopsComponent extends Component {
  handleRemove = (shopAccount) => {
    this.props.removeShop(shopAccount);
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.items.map((shopItem) => <ShopItemComponent key={shopItem.shopAccount} item={shopItem} removeShop={this.handleRemove} />)}
      </React.Fragment>
    );
  }
}

---

已绑定。

密钥应基于内容，而不是位置。请提供ShopItemComponent的代码好吗？另外，如果您使用的是箭头函数，则不需要在构造函数中绑定它，它们会自动绑定。是的！非常感谢！

class ShopsComponent extends Component {
  constructor() {
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleRemove = (shopAccount) => {
    this.props.removeShop(shopAccount);
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.items.map((shopItem, i) => {
          return (<ShopItemComponent key={i} item={shopItem} removeShop={this.handleRemove} />);
        })}
      </React.Fragment>
    );
  }
}

class ShopsComponent extends Component {
  handleRemove = (shopAccount) => {
    this.props.removeShop(shopAccount);
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.items.map((shopItem) => <ShopItemComponent key={shopItem.shopAccount} item={shopItem} removeShop={this.handleRemove} />)}
      </React.Fragment>
    );
  }
}

handleRemove = (shopAccount) => {
  this.props.removeShop(shopAccount);
}