时间戳

首页 > 解决方案 > 在 ReactJS 中状态更新和删除后 DOM 不会删除项目

javascript - 在 ReactJS 中状态更新和删除后 DOM 不会删除项目

问题描述

我一直很困惑为什么一个项目 -card在删除和状态更新后不会从 DOM 中消失。我的编辑功能工作正常，并且我的代码因拼写错误和错误的变量等而变质。

这是我的 App（顶级组件）状态对象：

state = {
  decks: [],
  cards: [],
  selectedCards: [],
  selectedDecks: [],
  currentUser: null,
  users: []
}

我在 App 中的 Delete 函数（乐观）被传递给deckLayout组件：

deleteCard = (cardId, deckId) => {
  const cardCopy = this.state.cards.slice()
  const foundOldCardIdx = cardCopy.findIndex(card => card.id === cardId)
  cardCopy.splice(foundOldCardIdx, 1)
  this.setState({
    cards: cardCopy
  }, console.log(this.state.cards, cardCopy))
  this.filterCards(deckId)
  console.log(this.state.cards)
  fetch(`http://localhost:9000/api/v1/cards/${cardId}`, {
    method: 'DELETE'
  })
};

这是一个filterCards在删除和状态更新后调用的函数（这适用于编辑）：

filterCards = (deckId) => {
  if (this.state.cards.length === 0) {
    alert('No cards yet!')
  } else {
    const filteredCards = this.state.cards.filter(card => card.deck_id === deckId)
    this.setState({
      selectedCards: filteredCards
    })
    this.filterDecks()
  }
};

然后调用一个filterDecks函数：

filterDecks = () => {
  if (this.state.currentUser) {
    const filteredDecks = this.state.decks.filter(deck => {
      return deck.user_id === this.state.currentUser.id
    })
    this.setState({
      selectedDecks: filteredDecks
    })
  } else {
    alert('Login or sign up')
  }
};

标签： javascriptreactjs

解决方案

推荐阅读