无法通过反应中动态div元素的索引号从数组中删除特定元素? [英] Can't remove specific elements from array by index number from dynamic div element in react?

问题描述

我无法从任何动态 div 中通过索引号删除数组的特定元素

I can't remove specific elements of array by index number from any dynamic div

const { useState } = React;

function Check(){
  var [Children, setChildren] = useState([])
    
  function RemArr(docs){
    const temp = [...Children]
    temp.splice(docs["i"], 1);
    setChildren(temp)
  } 
    
  function Product(docs) {
    var document = (<React.Fragment>
      <button onClick={()=>RemArr(docs)}>
        List {docs["i"]}
      </button>
      <p></p>
      <input/>
      <p></p>
    </React.Fragment>);
    setChildren([...Children, document])
  }

  return (<React.Fragment>
    <div>Check</div>
    {Children}
    <button
     onClick={()=>{Product({fix:false, i:Children.length})}}
    >Add List </button>
  </React.Fragment>)
}

ReactDOM.render(<Check />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

当我想删除任何特定的 div 时，不仅要从数组中删除这个 div，还要从数组中删除下一个 div.

When i want to remove any specific div then not only this div remove from array, also remove next div from array.

例如

array = [0,1,2,3,4,5,6,7,8,9]

如果我只想从数组中删除 6，它会删除从 6 到 9 的所有值，等等我只剩下:

If I want to remove only 6 from the array, however, it instead removes all the values from 6 to 9, and so I am left with just:

array = [0,1,2,3,4,5]

我认为问题出在这个函数上:

I think the problem originates from this function:

function RemArr(docs){
  const temp = [...Children]
  temp.splice(docs["i"], 1);
  setChildren(temp)
}

推荐答案

你的 RemArr 函数对 Children 有一个闭包，这意味着点击删除按钮将调用一个remArr 的潜在旧声明，其中在 remArr 中，Children 数组将引用回您最初添加点击时的 Children 数组状态事件处理程序，而不是 Children 的当前状态.

Your RemArr function has a closure over Children, meaning that clicking on the remove button will call a potentially old declaration of remArr, where inside that remArr, the Children array will refer back to the Children array state from when you originally added the click event handler, rather than the current state of Children.

为了克服这个问题，您可以将Product组件化而不是将其变成一个函数，并根据Choice中的某些状态驱动Children，您可以使用它来生成您的产品元素:

To overcome this, you can componentize Product rather than making it a function, and drive the Children based of some state in Choice, which you can use to generate your Product elements:

const {useState} = React;

function Product({docs, onClick}){
  return <React.Fragment>
    <button onClick={onClick}>
      List {docs.i}
    </button>
    <p></p>
    <input/>
    <p></p>
  </React.Fragment>;
}

function Check() {
  const [products, setProducts] = useState([]);
  function remArr(index){
    const temp = [...products];
    temp.splice(index, 1);
    setProducts(temp);
  }
  
  function addProduct() {
    const prevNum = products[products.length-1];
    setProducts([...products, {
      fix: false, 
      i: prevNum === undefined ? 0 : prevNum.i + 1
    }]);
  }

  return (<React.Fragment>
    <div>Check</div>
    {products.map(
      (doc, i) => <Product key={doc.i} docs={doc} onClick={() => remArr(i)}/>
    )}
    <button
     onClick={addProduct}
    >Add List</button>
  </React.Fragment>);
}

ReactDOM.render(<Check />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

上述 .map() 方法创建新的 组件更新"/重新设置 onClick 所有产品组件的功能都指向最新"；声明了 remArr 函数，它可以访问正确/最新的 products 数组.这与您的示例不同，其中 Children 数组内的旧 JSX 对象仍然具有 onClick 属性，这些属性引用了 remArr 的旧声明函数(可以访问旧的 Children 数组状态)

The above .map() method that creates new <Product /> components "updates"/re-sets the onClick function of all the product components to point to the "latest" declared remArr function, which has access to the correct/up to date products array. This is unlike your example, where the old JSX objects inside of the Children array still have onClick attributes that refer to the old declarations of the remArr function (which have access to the old Children array state)

这篇关于无法通过反应中动态div元素的索引号从数组中删除特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！