javascript - array.splice() 删除错误的元素-6ren

javascript - array.splice() 删除错误的元素

转载作者：行者123 更新时间：2023-12-01 00:05:11

26

4

我是 React 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)}
            >
              &times;
            </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 匹配的元素被删除，就像在元素中一样，它不在那里，但被删除的元素的输入只是进入另一个元素。就像上面图片中的示例

最佳答案

您传递的索引可能不正确，

Array.filter 更适合这种任务:

removePara = index => {
  let array = this.state.paras.filter(e => e.props.id !== index);
  this.setState({ paras: array });
};

关于javascript - array.splice() 删除错误的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60436621/

26

4

0

文章推荐： jquery - 在jquery中创建循环背景动画

文章推荐： jQuery .eq(x) 在 IE 中返回与 FF/Chrome 中不同的元素

文章推荐： jquery - 在 attr() 回调中执行函数？

JavaScript splice() 方法删除数组的最后一项，如果 splice() 的第一个参数是 -1
我正在使用 JavaScript splice() 方法从数组中删除一个元素。代码如下， var fruits = ["Banana", "Orange", "Apple", "Mango"]; fu
javascript - 为什么 javascript splice 调用 splice 即使它不加入但拆分数组
JavaScript 拼接方法实际上将数组拆分为两个，如下例所示: var a = ['a','b','c']; var b = a.splice(0,2); console.log(a); // o
javascript splice() 导致 "arrayName.splice() is not a function"错误
我正在尝试从包含表单输入字段的数组中删除某些值: allFields = theForm.getElementsByTagName("INPUT"); for(j = 0; j =0; j--){
javascript - array.splice() 给出错误 TypeError : arr. splice 不是函数(…)
var arr = document.querySelectorAll("a[href*='somestring']") 返回控制台中看起来像数组的内容。方括号 [] 和 arr.length = 7
javascript [array].splice 不工作 ("Uncaught TypeError: collisions.splice is not a function")
我正在尝试从 javascript 中的数组中删除特定项目，但似乎无法使 [array].splice 函数正常工作。此代码用于检查 SVG 对象是否与另一个对象发生碰撞(对于游戏)。玩家总是希望与
关于此语句中 splice 的 javascript 语法问题 -> copy.push(array.splice(i,1)[0])
所以这是一个语法问题，我一直在阅读 MDN 文档，但我找不到类似的例子。我从这里得到了这个特定的代码片段:https://bost.ocks.org/mike/shuffle/正如我正在阅读随机数组一
javascript - 为什么 `splice.apply(arguments, 0)` 失败而 `splice.call(arguments, 0)` 返回数组
这个问题在这里已经有了答案: What is the difference between call and apply? (23 个回答) 关闭 8 年前。我正在尝试将可在函数内部访问的 arg
javascript - 替换 javascript 对象中的字段？使用 splice 和 push，splice 的 indexOf 返回 -1 值？
我有一个数组，它在任何时候都可能包含以下值的任意组合: var positions = ['first', 'second', 'third', 'fourth']; 目标是重建一个 Javascri
javascript - 对元素集合使用 splice
我运行它是为了获取 HTML 表单控制元素的集合 var elem = document.getElementById('display').elements; 我可以运行它来获取一组元素: var
javascript - 如何正确使用Array.Splice
如何正确使用Array.Splice？ var myEmptyData = []; myEmptyData = $.parseJSON('[{ "m_sPartNumber": "B104-9
javascript - .splice() - 如何保护原始数组？
这个问题已经有答案了: Why does changing an Array in JavaScript affect copies of the array? (13 个回答) 已关闭 7 年前。
javascript - splice() 无法正常工作
我正在为每个单击的导航容器设置一个 cookie。它设置一个连接的数组并设置cookie值。如果再次单击，则将其从数组中删除。它有点问题。只有点击其他元素后才会拼接。然后它的行为就很奇怪。可能
Javascript splice 方法从两个数组中删除值
Javascript(使用 jQuery): var paragraphs = [ ['This is my first paragraph content of the first arra
java - "splice"我的更新循环的最佳方法？
如果我正在制作一款游戏，并且我希望某些内容仅每隔一段时间更新一次，那么解决此问题的最佳方法是什么？我天真的想法只是保留一个通过 mod 循环的“帧”跟踪器。数学并以特定数字更新特定内容。有更好的方
javascript - Splice 不复制对象数组
这个问题已经有答案了: How do you clone an array of objects in JavaScript? (33 个回答) using splice(0) to duplicat
javascript - Splice() 不会使数组为空
我有数组 x、y 和 z。在遍历 x 时，根据条件我需要不断从 z 中删除元素。这是我正在尝试做的事情: var x = ["test0", "test1", "test2"]; var y = ["
JavaScript splice() 方法不删除数组中的时间项是半点吗？
我有 3 个包含时间段的数组，它们是字符串...像这样: $scope.shiftMorning = ['09:00', '09:30', '10:00', '10:30', '11:00', '11
javascript - .splice() 不断删除数组的最后一项
我在我的表单上创建了一个功能，我可以通过单击一个按钮为多个图像添加多个文件输入，这按预期工作。现在，当我尝试使用 .splice 删除输入字段时，它会不断删除我的输入字段所在的数组的最后一项，而不是具
javascript splice() 索引问题
我必须向数组添加一些值。代码示例: temp[0]=new Array("0","0"); temp[1]=new Array("0","0"); temp[2]=new Array("0","0"
javascript - .splice() 没有完全缩短我的数组
我有一个包含字符串的数组，如果字符串中没有任何内容，我想使用 .splice() 将其从数组中删除。不知何故，它没有得到所有空条目。如果开头有 2 个空条目，它只会得到一个。这是我的 fiddle

首页

博学

6Ren·AI

商城

javascript - array.splice() 删除错误的元素