javascript - ReactJS:从列表中删除没有ID的项目？

Question

我有一个问题，即使在查看了这里的其他一些帖子并尝试了一些东西之后，我似乎也无法解决。我正在玩 React 并制作一个快速的待办事项列表。很简单，因为我可以添加新名称并按预期将它们显示在页面上。我希望能够删除我选择的项目，为此我环顾四周，看到其他人正在做这样的事情来删除项目:

deleteName(id, e) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name.id !== id)
    });
}

这对我来说很有意义，但我没有在我的 <li> 中添加任何 id项目所以我想我可以这样做:

this.setState({
   names: names.filter(name => name !== name)
});

但这只会删除整个列表。我究竟做错了什么？我是否应该重构如何将名称添加到数组以获取 id 并进行检查？我将在下面发布完整的组件代码。我始终感谢我能得到的任何帮助。谢谢大家。

class ContactListPage extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.state = {
        names: []
      };

      this.addName = this.addName.bind(this);
      this.deleteName = this.deleteName.bind(this);
    }

  addName(name) {
    const { names } = this.state;

    if (name === '') {
        console.log('add a name first!')
    } else {
        this.setState({
          names: names.concat(name)
        });
    }
  }

  deleteName(id, e) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name !== name)
    });
  }

  render() {
    const { names } = this.state;

    const named = names.map((name, i) => (
        <Card key={i} className='todo-list'>
            <CardText>
              <li>{name}    
                <FloatingActionButton className='fab-delete' mini onClick={this.deleteName}>
                           <i className="material-icons fab-icon-delete" style={{color: 'white'}}>-</i>
                        </FloatingActionButton>
              </li>
            </CardText>
        </Card>
    ));

    return (
        <div className='contact-list'>
          <div className="field-line">
            <NewName addName={this.addName} />
            <ul className='new-name'>
              {named}
            </ul>
          </div>
        </div>
    );
  }
}

Answer 1

您将每个名称与其自身进行比较，这将产生一个空列表，无论其中有什么(除了我猜 NaN？)。

names.filter(name => name !== name)

我认为您想将名称从 View 传递到删除函数中。自从我完成 React 以来已经有一段时间了，但是您可能可以使用 JSX 中的 lambda 来完成此操作。

deleteName(nameToDelete) {
    const { names } = this.state;

    this.setState({
        names: names.filter(name => name !== nameToDelete)
    });
}

render() {
    // Simplified to focus on the onClick change
    return names.map(name => <Card>
        ...
        <FloatingActionButton onClick={(e) => this.deleteName(name)} ... />
        ...
    </Card>);
}

如果您需要担心重复的名称，那么您可以将当前索引传递到 deleteName() 而不是字符串本身。是否有必要由您决定。