Question

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

ShopsContainer维护一系列本地状态的商店商品，这些商品作为道具传递到ShopsComponent中。 ShopsComponent然后映射作为道具接收的items数组，并为数组中的每个项目渲染一个ShopsItemComponent。

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

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

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

我想发生的事情（或我认为应该发生的事情）是，当removeShop被调用时，该商店被从状态中的item数组中删除，并且ShopsContainer重新呈现，导致{{1 }}，以便在收到更新的道具后重新渲染。最后，ShopsComponent将在道具中显示新近更新的items数组，并显示一个用于正确商品的ShopItemComponent。也许问题与更新道具有关？

我的代码如下：

ShopsContainer.js

ShopsComponent

ShopsComponent.js

class ShopsContainer extends Component {
  constructor() {
    this.state = {
      items: null
    } 

    this.getAll();
    this.removeShop = this.removeShop.bind(this);
  }

  getAll = () => {
    // API request that fetches items and updates state
  }

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

  render() {
    return (
      <div>
        {this.state.items ? <ShopComponent items={this.state.items} removeShop={this.removeShop} /> : <div><h1>Loading...</h1></div>}
      </div>
    );
  }
}

Answer 1

您的代码运行良好，但是您只有一个错误，您为ShopComponent分配了key的索引作为ShopItemComponent的索引，并做出反应来跟踪这些indexes更新正确的组件，因此您需要将key设置为项目之间的唯一值，然后我意识到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>
    );
  }
}

希望您能找到有用的

注意，当您在类中使用箭头函数时，请勿将该方法绑定到构造函数中，因此请删除它，因为

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

已被绑定。

从DOM中删除了ReactJS错误的组件

1 个答案: