javascript - 无法通过 react 中动态div元素的索引号从数组中删除特定元素？

Question

我无法从任何动态 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。
例如。

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

如果我只想删除 6但是，它会从数组中删除 6 中的所有值。至 9 ，所以我只剩下:

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

我认为问题源于此功能:

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

Answer 1

您的 RemArr函数在 Children 上有一个闭包，这意味着单击删除按钮将调用 remArr 的潜在旧声明。 , 里面的那个 remArr , Children数组将引用您最初添加单击事件处理程序时的 Children 数组状态，而不是 Children 的当前状态。 .
为了克服这个问题，您可以组件化 Product而不是让它成为一个功能，并驱动 Children基于 Choice 中的某个状态，您可以使用它来生成您的 Product 元素:

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()创建新的方法 <Product />组件“更新”/重新设置 onClick所有产品组件的功能指向“最新”声明 remArr函数，可以访问正确/最新的 products大批。这与您的示例不同，其中 Children 中的旧 JSX 对象阵列还有 onClick引用 remArr 的旧声明的属性函数(可以访问旧的 Children 数组状态)