javascript - array.splice() 删除错误的元素
问题描述
我是反应 js 的初学者,想知道为什么 splice() 方法对我来说不能正常工作。我的方法在这里:
removePara = index => {
let array = [...this.state.paras];
for (let x = 0; x < this.state.count; x++) {
try {
if (array[x].props.id == index) {
array.splice(x, 1);
}
} catch (e) {}
}
this.setState({ paras: array });
};
所以我传递了一个索引,如果一个元素的 id 与索引匹配,则删除该元素。我使用了 try-catch 导致并非所有索引都存在(它们可能已通过相同的函数被删除)。这是三个元素的图像:
不是第二个被删除,而是最后一个被删除。我该如何解决?我知道我的按钮的 onclick 工作正常。完整代码如下:
//index.js
const rootElement = document.getElementById("root");
class App extends React.Component {
state = {
paras: [],
count: 0
};
addPara = () => {
this.setState({
paras: [
...this.state.paras,
<Paragraph id={this.state.count++} remove={this.removePara} />
]
});
};
removePara = index => {
let array = this.state.paras.filter(e => e.props.id !== index);
this.setState({ paras: array });
};
render() {
return (
<div>
{this.state.paras}
<div className="btn btn-warning" id="add" onClick={this.addPara}>
Add Paragraph
</div>
<div name="count">{this.state.count}</div>
</div>
);
}
}
ReactDOM.render(<App />, rootElement);
//Paragraph.js
class Paragraph extends React.Component {
render() {
let style = {
height: "150px",
marginBottom: "10px"
};
return (
<div className="paragraph" id={this.props.id}>
<div className="row">
<div className="col-sm-11">
<textarea
className="form-control"
name={"paragraph" + this.props.id}
placeholder="Put Paragraph Here"
style={style}
required
></textarea>
</div>
<div className="col-sm-1">
<div
className="btn btn-danger del-rotate"
onClick={() => this.props.remove(this.props.id)}
>
×
</div>
</div>
</div>
</div>
);
}
}
<!--index.html-->
<html>
<head>
<script type="application/javascript" src="../reactjs/react.js"></script>
<script type="application/javascript" src="../reactjs/react-dom.js"></script>
<script type="application/javascript" src="../reactjs/babel.js"></script>
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
<script type="text/babel" src="Components/Paragraph.js"></script>
<script type="text/babel" src="index.js"></script>
</head>
<body id="body">
<div class="container-fluid">
<br>
<br>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div align="center">
<h1>Write Article</h1>
</div>
<br>
<form action="submit-article.php" method="POST">
<input class="form-control input-sm" type="text" placeholder="Enter Title" name="title"
style="width: 35%" autofocus required></input>
<br>
<div id="root"></div>
<br>
<input class="btn btn-success float-right" type="submit" value="Done">
</form>
</div>
</div>
</div>
</body>
</html>
但是与 id 匹配的元素会被删除,就像在元素中一样,它不存在,但是被删除的元素的输入只是进入另一个元素。就像上面图片中的示例一样
解决方案
可能index
你通过的不正确,
Array.filter
更适合这种任务:
removePara = index => {
let array = this.state.paras.filter(e => e.props.id !== index);
this.setState({ paras: array });
};
推荐阅读
- java - 选择 SQL 查询仅返回 tableModel 中的一个数组值
- python-3.x - Apache Spark 2.0 parquet 文件是否与 Apache Arrow 不兼容?
- machine-learning - 如何解决'CUDA 内存不足。试图在 pytorch 中分配 xxx MiB'?
- r - R 中所有列的 1 天滞后、3 天平均滞后和 7 天平均滞后
- koa - 在 koa-session 中销毁会话
- matlab - 从工作区读取多个编号的数据变量
- python - 如何计算一列python pandas每一行中的特定单词
- unity3d - 纹理呈现粉红色,但仅在远处或某个角度显示时
- ios - 如何仅访问 SwiftUI 中数据的第一个元素?
- mysql - 字符集 utf8mb4 collate utf8mb4_general_ci 不接受带重音的单词