如何使用Array.filter（）函数从数组中删除单个元素？

Question

我不确定我是否在正确使用过滤器功能从数组中删除元素。 我想进行设置，所以当我单击该元素时，它将删除该元素。 但是，当前它正在删除所有元素，而不仅仅是一个元素。 元素来自单击屏幕上显示的项目（这些项目来自API）

class App extends React.Component {
  state = {
    query: "",
    contacts: [],
    names: []
  };

  addName = (e, name) => {
    this.setState(prevState => ({
      names: [...prevState.names, name]
    }));
  };

这是混乱的地方。 我不确定为什么当我单击一个名称时会删除所有名称

  removeName = (e, name) => {
    this.setState(prevState => ({
      names: prevState.names.filter(n => n.name !== name)
    }));
  };

  onChange = e => {
    const { value } = e.target;
    this.setState({
      query: value
    });

    this.query(value);
  };

  query = query => {
    const url = ("https://jsonplaceholder.typicode.com/users");

    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({ contacts: data.response });
      });
  };

  componentDidMount() {
    this.query("");
  }

  render() {
    return (
      <div>
        <form>
          <input
            type="text"
            placeholder="Type names to add"
            onChange={this.onChange}
          />
          {this.state.contacts.map(contact => (
            <div key={contact.name}>
              <p>
                {contact.name}{" "}
                <button
                  onClick={e => this.addName(e, contact.name)}> Add 
                 </button>   
              </p>
            </div>
          ))}
        </form>

        {this.state.names.map(name => (
          <p key={name.name}>
            {name}{" "}
            <button
              onClick={e => this.removeName(e, name.name)}>
            </button>
          </p>
        ))}
      </div>
    );
  }
}

Answer 1

我认为发布原始答案但删除它的人实际上具有正确的想法。 当您添加addNames ，您正在添加字符串。 名称数组由字符串而非对象组成。 因此，当您返回removeNames函数时，每个元素n是一个字符串，并且n.name是undefined （即， n是名称， n.name是什么）。 因此， n.name !== name将永远是真（即，阵列中的每个名称定义 ）。 您只想将n与name （ n !== name ）比较。

    removeName = (e, name) => {
        this.setState(prevState => ({
          names: prevState.names.filter(elmName => elmName !== name)
        }));
    }

并在onclick中：

    <button
       onClick={e => this.removeName(e, name)}>
    </button>

最后要考虑的一件事：只有名称唯一，这才起作用。 如果数组中具有相同的名称，则有超过1个元素被删除的风险。 因此，可能期望设计一种用于确保唯一性的方案。 即，名称+ [它在数组中的位置]是一种快捷方法，尽管有更好的方法。