React：从组件数组中删除组件

Question

我正在使用 useState 钩子初始化 myComponents 数组

const [myComponents, setMyComponents] = useState([])

然后我在单击按钮时将组件添加到数组中

setMyComponents([...myComponents, <MyComponent />])

我的组件：

function MyComponent(props) {
  return (
    <div class="flex">
      <button>DELETE</button>
      <p>Some text...</p>
    </div>
  )
}

当按下任何 DELETE 按钮时，myComponents 数组中的相关 MyComponent 应被删除。我不知道如何获取对我必须删除的组件的引用。我不能使用数组索引，因为当从数组中删除第一个组件时，以前的索引不再有效。

请告诉我如何从数组中删除特定的 MyComponent，以免影响后续删除。

Answer 1

这不是你在 react 中渲染数据的方式，通常你会映射一个数据列表并像下面这样渲染组件，所以当你需要删除一个项目时，你只需从数据列表中删除该项目并Listcomponent 将使用新数据重新渲染：

function MyComponent(props) {
const {index,text,deleteItem} = props
  return (
    <div class="flex">
      <button onClick={e=>deleteItem(index)}>DELETE</button>
      <p>{text}</p>
    </div>
  )
}

function MyComponentList(props) {
  const [mydata, setmydata] = useState(["text1","text2","text3"])

 const deleteItem=(index)=>{
      const filterdData= [...mydata].filter((data,i)=> i != index)
      setmydata(filterdData)
 }
  return (
     {
        mydata.map((text,index)=><MyComponent key={index} text={text} index={index} deleteItem= {deleteItem} />
     }
  )
}