React拼接子组件麻烦答案

【问题标题】：React splice child component troubleReact拼接子组件麻烦
【发布时间】：2020-06-20 18:31:31
【问题描述】：

我有（例如）2 个组件。当然，其中 1 个是 Parent，另一个是 Parent 的 Child。我的目标是按按钮删除组件，但是当我按下子组件内的删除按钮时，删除下一个组件的功能。也许我忘记了什么？

示例： [[1],[2],[3]] - 即嵌套数组与另一个数组。我想删除 [2] (parentArray[1])。但是删除函数删除[3]（parentArray [2]），我有[[1]，[2]]。那是我的麻烦。

父组件：

import React from 'react'
import classes from './Kanban.module.scss'
import Card from './Card/Card.js'

export default class Kanban extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      cards: [
      ]
    }

    this.createCardHandler = this.createCardHandler.bind(this);
    this.deleteCardHandler = this.deleteCardHandler.bind(this);
  }

  createCardHandler() {

    this.setState({
      cards: this.state.cards.concat({ id: this.state.cards.length })
    })

  }

  deleteCardHandler(index) {

    this.setState(prevState => {

      let cards = [...prevState.cards]

      cards.splice(index, 1)

      return {
        cards: cards
      }

    })

  }

  render() {
    let cards = null;

    cards = this.state.cards.map((cards, id) => {


      return (
        <Card
          index={cards.id}
          id={cards.id}
          onDelete={this.deleteCardHandler.bind(this, id)}
        />
      )
    })

    return (
      <>
        <div>
          <button className={classes.CreateCardButton} onClick={this.createCardHandler}>+</button>
          {cards}

        </div>
      </>
    )
  }
}

子组件：

import React from 'react'
import classes from './Card.module.scss'
import List from './List/List.js'

export default class Card extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      lists: []
    }

    this.CreateListButton = this.CreateListButton.bind(this);
  }

  CreateListButton() {

    this.setState({
      lists: this.state.lists.concat('List')
    })

  }

  deleteListHandler(index) {
    let lists = [...this.state.lists]

    lists.splice(index, 1)

    this.setState({
      lists
    })
  }

  render() {
    let lists = null

    lists = this.state.lists.map((lists, index) => {
      return (
        <List
          index={this.state.lists.length - 1}
          onDelete={this.deleteListHandler.bind(this, index)}
        />
      )
    })
    return (

      <div className={classes.Card}>

        <button className={classes.DeleteCardButton} onClick={this.props.onDelete}>✖</button>

        <input maxLength='18' autoFocus className={classes.InputTitleInCard}></input>

        {lists}

        <button className={classes.CreateNewListButton} onClick={this.CreateListButton}>CREATE NEW LIST</button>

      </div>

    )
  }


}

【问题讨论】：

标签： javascript reactjs components state splice

【解决方案1】：

请为您的子组件添加一个索引道具

cards = this.state.cards.map((card, index) => {
  return (
    <Card
      index={card.id}
      id={card.id}
      //Here i giving child component function from parent component
      onDelete={this.deleteCardHandler.bind(this, index)}
    />
  )
})

【讨论】：

您好！我明白了，但我需要更改删除卡的功能，而不是列表。我认为看板组件中的所有问题都包含卡片组件。所以要理解结构：看板->卡片->列表。看板可以包含：看板 -> 卡片 |卡 |卡片。我需要了解如何正常删除卡。如果有人可以向我解释这一点，我只是更改列表删除方法:)（对不起英语，我是俄罗斯人:)）
请将index prop添加到您的子组件
谢谢帮忙，我在里面加了props，还是不行=(
你能用更新的代码更新你的问题吗

【解决方案2】：

问题在于您删除处理程序。最初，看板类的状态是 []。然后，假设你添加 4 张卡，它会变成 [{id: 0}, {id: 1}, {id: 2}, {id: 3}] 所以，如果你删除说第二张卡，你的新状态就变成了，

[{id: 0}, {id: 2}, {id: 3}]

现在，如果您尝试删除第三张卡片，即 id=2，您的处理程序会从状态中删除索引为 2 的元素，即 id 为 3 的元素。因此，您单击的元素，下一个元素将被删除。不要依赖数组索引（一旦您删除任何卡片，此映射将不起作用），请依赖您为卡片创建的 id。您编写删除处理程序的方式不正确。这是一个解决方案，这应该可以解决问题。

deleteCardHandler(index) {
    this.setState(previousState => previousState.filter(card => card.id !== index))
}

这基本上返回一个包含所有元素的数组，除了您单击删除的元素。希望对你有帮助！！！

【讨论】：

【解决方案3】：

当你设置状态时，使用它对我有用的扩展运算符。

this.setState({
    lists
})

改成这样

this.setState({
    [...lists]
})

【讨论】：