Javascript 从数组中删除选定项

我有一个简单的表单，我想在单击移除按钮时移除所选项目。我正在部分删除所需的项目，但如果删除中间的项目，它也会删除最后一个项目。如果删除第一项，它将删除整个数组

代码如下：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false,
      rulesTerm: ""
    };
  }

    handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  removeRule = (e, index) => {
    e.preventDefault();

    const { data } = this.state;
    console.log("removed", data.splice(index));

    this.setState({
      data: data,
      rulesTerm: ""
    });
  };

  render() {
     return (
       <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
               </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
           )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <React.Fragment>
                  <input
                    onChange={this.handleInput}
                    type="text"
                    placeholder="Cars"
                    name={rule}
                    defaultValue={rule}
                    key={index}
                  />
                  <button onClick={event => this.removeRule(event, index)}>
                    Remover
                  </button>
                </React.Fragment>
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

有什么帮助吗？ 谢谢大家!

使用时，需要传入要删除的元素数

如果省略deleteCount，或者如果其值等于或大于array.length-start，也就是说，如果它等于或大于数组中剩余的元素数，则从开始处开始，从开始到数组结束的所有元素都将被删除

使用时，需要传入要删除的元素数

如果省略deleteCount，或者如果其值等于或大于array.length-start，也就是说，如果它等于或大于数组中剩余的元素数，则从开始处开始，从开始到数组结束的所有元素都将被删除

---

一种解决方案是将删除函数转换为curried函数，该函数在调用一次时首先接收索引，然后接收事件

您可以使用setState的回调版本筛选出元素，并筛选出具有相同索引的元素：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.filter((el, i) => i !== index),
        rulesTerm: ""
    }));
};

您还可以指定仅需要删除单个图元的拼接方法：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.splice(index, 1),
        rulesTerm: ""
    }));
};

JSX中的函数绑定现在看起来如下所示：

<button onClick={this.removeRule(index)}>
    Remover
</button>

---

一种解决方案是将删除函数转换为curried函数，该函数在调用一次时首先接收索引，然后接收事件

您可以使用setState的回调版本筛选出元素，并筛选出具有相同索引的元素：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.filter((el, i) => i !== index),
        rulesTerm: ""
    }));
};

您还可以指定仅需要删除单个图元的拼接方法：

removeRule = index => event => {
    this.setState(prev => ({
        data: prev.data.splice(index, 1),
        rulesTerm: ""
    }));
};

JSX中的函数绑定现在看起来如下所示：

<button onClick={this.removeRule(index)}>
    Remover
</button>

---

在您的情况下，我将使用筛选器，并将规则作为参数传递：

 <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <React.Fragment>
                  <input
                    onChange={this.handleInput}
                    type="text"
                    placeholder="Cars"
                    name={rule}
                    defaultValue={rule}
                    key={index}
                  />
                  <button onClick={event => this.removeRule(event, rule)}>
                    Remover
                  </button>
                </React.Fragment>
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>

---

在您的情况下，我将使用筛选器，并将规则作为参数传递：

 <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <React.Fragment>
                  <input
                    onChange={this.handleInput}
                    type="text"
                    placeholder="Cars"
                    name={rule}
                    defaultValue={rule}
                    key={index}
                  />
                  <button onClick={event => this.removeRule(event, rule)}>
                    Remover
                  </button>
                </React.Fragment>
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>

---

---

那么索引1呢？就像那样，如果我删除第一个“Saab”，它会删除错误的项。奇怪的是，它不起作用，那么问题就在于你的输入。如果将defaultValue属性更改为value，您将看到在删除后输入值良好，但您将无法再更新它。您可以查看关于表单控制组件的React文档以获得更多解释：是的，您是对的，它与value prop一起工作。谢谢：那么，1呢？就像这样，如果我删除第一个“萨博”，它会删除错误的项目。奇怪的是，它不起作用，那么问题就在于你的输入。如果将defaultValue属性更改为value，您将看到在删除后输入值良好，但您将无法再更新它。您可以查看关于表单控制组件的React文档以获得更多解释：是的，您是对的，它与value prop一起工作。谢谢：如果我添加data.Stripe1，index，它不会删除第一项正确语法是data.StripeIndex，1-array.StripeStart[，deleteCount[，item1[，item2[，…]]]如果我添加data.Stripe1，index，它不会删除第一项正确语法是data.StripeIndex，1-array.StripeStart[，deleteCount[，item1[，item2[，…]]我将尝试：如果我选择删除中间项，它将删除最后一项：/n您有多个同名项吗？嗯，筛选方法应仅删除您传递给itI的名称的项。我将尝试：如果我选择删除中间项，它将删除最后一项：/n您有多个同名项吗？嗯，filter方法应该只删除带有您传递给itI的名称的项，但这增加了不必要的复杂性，同时没有提供它们当前正在做的事情的优势，例如，在每个渲染上仍然定义了一个新函数。此外，当你提到它时，你的答案并没有真正关注真正的问题：拼接的不当使用。看起来你根本没有阅读解决方案。新函数中给出的代码将其缩短，第二个解决方案精确地显示了如何使用拼接函数。JSX也更具可读性，无需在其中编写箭头函数。与此相反的是，向上投票的解决方案只不过是没有任何示例的文档的复制/粘贴。如果你打算使用旧的状态值，那么使用setState的回调版本也是推荐的方法，就像在本例中一样。我的意思是，我读了你的答案-我只是说你的答案首先，主要描述了curry的高级概念和设置状态的不同方式，这需要重构组件。您提到了如何使用splice，但没有提到这是问题的真正解决方案。虽然我同意你的回答提供了一个更干净的组件，但这不是问题的重点，它会分散专业人士的注意力

---

手头的问题：拼接的滥用。其他解决方案/评论中已经提到了拼接的错误用法，因此我认为重复它并不重要，唯一缺少的是它工作的示例。一个单一的函数正在被改变，而不是真正的重构，JSX几乎没有被改变。OP在前面也使用了回调setState，所以我觉得没有必要解释它是如何工作的，这个调用与前面的调用基本相同，只是有一些小的变化。我不认为5行是一个重构。我没有投票，但这增加了不必要的复杂性，同时没有提供他们当前正在做的优势。此外，当你提到它时，你的答案并没有真正关注真正的问题：拼接的不当使用。看起来你根本没有阅读解决方案。新函数中给出的代码将其缩短，第二个解决方案精确地显示了如何使用拼接函数。JSX也更具可读性，无需在其中编写箭头函数。与此相反的是，向上投票的解决方案只不过是没有任何示例的文档的复制/粘贴。如果你打算使用旧的状态值，那么使用setState的回调版本也是推荐的方法，就像在本例中一样。我的意思是，我读了你的答案-我只是说你的答案首先，主要描述了curry的高级概念和设置状态的不同方式，这需要重构组件。您提到了如何使用splice，但没有提到这是问题的真正解决方案。虽然我同意你的回答提供了一个更干净的组件，但这不是问题的重点，它分散了我们对当前问题的注意力：拼接的滥用。好吧，其他解决方案/评论中已经提到了拼接的错误用法，所以我认为重复它是不相关的，唯一缺乏的是它工作的示例。一个单一的函数正在被改变，而不是真正的重构，JSX几乎没有被改变。OP在前面也使用了回调setState，所以我觉得没有必要解释它是如何工作的，这个调用与前面的调用基本相同，只是有一些小的变化。我不认为5行是一个重构。