javascript - ReactJS 错误的组件被从 DOM 中删除

Question

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

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

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

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

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

我希望发生的事情(或者我认为应该发生的事情)是，当调用 removeShop 时，该商店将从状态中的项目数组中删除，并且 ShopsContainer 重新启动-renders 导致 ShopsComponent 使用接收到的更新后的 props 重新渲染。最后，ShopsComponent 将映射 Prop 中新更新的项目数组，显示正确项目的“ShopItemComponent”。也许问题与正在更新的 Prop 有关？

我的代码如下:

ShopsContainer.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>
    );
  }
}

ShopsComponent.js

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>
    );
  }
}

Answer 1

您的代码运行良好，但您只有一个错误，您的 ShopComponent 为每个 ShopItemComponent 分配索引作为 key 并使用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>
    );
  }
}

希望你能找到有用的。

Note, when you are using a arrow function into your class, don't bind that method into the constructor, so remove it, because

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

已绑定(bind)。