无法通过索引号从反应中的动态 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.

的当前状态

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

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 函数，它可以访问 correct/up 到日期 products 数组。这与您的示例不同，其中 Children 数组内的旧 JSX 对象仍然具有 onClick 属性，这些属性引用 remArr 函数的旧声明（可以访问旧的 Children数组状态)

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

Can't remove specific elements from array by index number from dynamic div element in react?

javascript

arrays

reactjs

use-state