React拼接子组件麻烦

Posted 2023-02-23

【中文标题】React拼接子组件麻烦

【英文标题】：React splice child component trouble

【发布时间】：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>

    )
  

【参考方案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]
)