javascript - 验证用户输入 React 时删除了错误的 UI 组件

Question

本质上，我正在尝试开发一个类似 KanbanBoard 的应用程序，当我从验证函数中调用删除函数时，我遇到了一些奇怪的行为。代码是here在codesandbox上。主要问题是，当有多个卡并且我尝试使用 onBlur 事件删除卡时，发生事件的卡不会被删除，而是会删除另一个空卡。如果一列中的所有其他卡片都有文本，它就会按预期工作。请忽略 dnd 代码，因为它是在原始问题之后出现的。

提前致谢。

编辑:这是 App.js 的逻辑

  state = { list: list }

  handleChange = (e, col) => {
    let eid = parseInt(e.target.id)
    let updatedList = this.state.list.map(obj => {
      if (obj.id === col) {
        let card = { text: e.target.value }
        obj.cards[eid] = card
      }
      return obj
    })
    this.setState({ list: updatedList })
  }


  setText = (e, col) => {
    if (e.target.value === "") {
      e.target.placeholder = "YOU MUST ENTER TEXT. THIS BOX WILL CLOSE NOW"
      e.persist()
      setTimeout(() => {
        this.delete(e, col)
      }, 3000)
      return
    }

  }

  delete = (e, col) => {
    e.preventDefault()
    let eid = parseInt(e.target.id)
    let updatedList = this.state.list.map(obj => {
      if (obj.id === col) {
        obj.cards = obj.cards.filter((c,i) => i !== eid)
        //obj.counter--
      }
      return obj
    })
    this.setState({ list: updatedList })
  }

  add = e => {
    e.preventDefault()
    let eid = parseInt(e.target.id)
    let updatedList = this.state.list.map(obj => {
      if (obj.id === eid) {
        let card = {text:""}
        obj.cards.push(card)
        obj.counter++
      }
      return obj
    })
    this.setState({ list: updatedList })
  }

}

Answer 1

map 为其迭代的每个项目返回一个项目。也许使用 filter 在这种情况下会有所帮助。我假设您的 splice 使 this.state.list 的顺序变得疯狂和困惑。

let updatedList = this.state.list.filter(obj => obj.id !== col);

不确定 col 或 eid 是否是正确的比较对象，但这将为您提供一个新列表，其中包含之前的所有项目(除了其id 与您要删除的 ID 匹配。

<小时/>

查看您的代码和框，存在一些问题。概括地说，每张卡都应该有一个不可变的 ID，您可以用它来删除它。您正在数组中使用卡片的索引，并与谁知道还有什么结合起来。您已经失去了事实来源，当您允许用户更改数组的顺序时，这一点尤为重要。您的卡应该触发您从其父卡传递给它的删除功能。它应该只获取该卡的 ID，将其从当前状态中过滤出来，然后设置新状态。你让这件事变得过于复杂了。

父级 -

state = { list : [{id: 1, ...other card stuff}, {...more cards}] };

delete = id => {
    const newList = this.state.list.filter(item => item.id !== id);
    this.setState({ list: newList };
}

render = () => {
    const { list } = this.state;

    return list.map(item => (
        <Card
             {...item}
             onDelete={this.delete}
        />
    ))
}

卡片 -

// whenever you need to delete this card 
this.props.onDelete(this.id);