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将始终为true（即，定义了数组中的每个名称）。您只想将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个元素被删除的风险。因此，可能期望设计一种用于确保唯一性的方案。即，名称+ [它在数组中的位置]是一种快捷方法，尽管有更好的方法。

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

1 个答案: