Неправильный компонент ReactJS удаляется из DOM

Question

У меня есть три файла: ShopsContainer.js ShopsComponent.js и ShopsItemComponent.js

ShopsContainer поддерживает массив предметов магазина в локальном состоянии, который передается в ShopsComponent в качестве реквизита.ShopsComponent затем отображает массив элементов, который принимается в качестве реквизита, и отображает ShopsItemComponent для каждого элемента в массиве.

В моем файле ShopsContainer у меня есть метод, который удаляет элемент магазина из состояния, используя следующий код:

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

Когда это происходит, правильный элемент удаляется из элементоводнако массив в состоянии, независимо от того, какой последний ShopItem находится в DOM во время вызова removeShop, будет удален независимо от того, является ли это правильный элемент, который должен быть удален, или нет.Другими словами, когда вызывается removeShop и массив элементов в состоянии корректно обновляется, неправильный ShopItemComponent удаляется из DOM.

То, что я хотел бы случиться (или то, что я думаю, должно произойти), это когда вызывается removeShop, этот магазин удаляется из массива предметов в состоянии и ShopsContainer повторно отображает, вызывая ShopsComponent всделать рендер с полученными обновленными реквизитами.И, наконец, ShopsComponent будет отображаться через недавно обновленный массив элементов в подпорках, отображая `ShopItemComponent для правильных элементов.Возможно, проблема связана с обновлением реквизита?

Мой код выглядит следующим образом:

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 назначает индекс как key для каждого ShopItemComponent, и реакция отслеживает эти indexes для обновления правильного компонента, поэтому вам нужночтобы установить ключ как уникальное значение между элементами, я понимаю, что 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);
}

уже связан.