[array.splice（）删除错误的元素

Question

我是反应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匹配的元素将被删除，就像在元素中那样，它不存在，但是被删除的元素的输入只会进入另一个元素。就像上面图片中的例子

Answer 1

您传递的index可能不正确，

Array.filter将更适合此类任务：

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

[array.splice（）删除错误的元素

问题描述投票：0回答：1

1个回答

最新问题

[array.splice（）删除错误的元素

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1