我无法从任何动态 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。
Eg.
array = [0,1,2,3,4,5,6,7,8,9]
如果我只想删除6但是，它会从数组中删除所有值6 to 9，所以我只剩下：
array = [0,1,2,3,4,5]
我认为问题源于这个函数：
function RemArr(docs){
const temp = [...Children]
temp.splice(docs["i"], 1);
setChildren(temp)
}
Your RemArr函数有一个闭包Children，这意味着单击删除按钮将调用一个可能旧的声明remArr，里面的哪里remArr, the 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大批。这与您的示例不同，在您的示例中，旧的 JSX 对象位于Children数组还有onClick引用旧声明的属性remArr函数（可以访问旧的Children数组状态）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
