javascript - 如何使用 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 时，您正在添加字符串。 names 数组由字符串组成，而不是对象。因此，当您返回到您的 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)
        }));
    }

在点击时:

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

还有最后一件事要考虑:这只有在名称是唯一的情况下才有效。如果数组中有相同的名称，则有超过 1 个元素被删除的风险。因此，可能需要设计一种方案来确保唯一性。即，名称 + [它在数组中的位置] 是一种快速而肮脏的方法，尽管有更好的方法。