如果元素已经存在，如何避免添加到数组中

Question

我正在 React 中制作添加到收藏夹功能。感谢大家的帮助，除了切换喜欢和不喜欢之外，我可以以某种方式完成这项工作。我像“喜欢：this.state.likes.filter(e => e.name !== person.name)”这样编码只是因为有人建议我这样编码。老实说，我不明白上面的代码可能是因为它是 ES6 语法。它在 ES5 中是什么样子的？现在代码不起作用，元素没有正确添加到数组中。如何修复此代码？

import React from 'react';
import axios from 'axios';
import IcoMoon from 'react-icomoon';

export default class PersonList extends React.Component {

    state = {
        persons: [],
        likes: []
    }

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const persons = res.data;
                this.setState({ persons });
            })
    }

    handleClick = person => {

        if (this.state.likes.filter(e => e.name === person.name).length > 0) {

            this.setState({
                likes: this.state.likes.filter(e => e.name !== person.name)
            });

            console.log(this.state.likes);
            return;
        }

        this.setState({
            likes: [...this.state.likes, person]
        });       
    };

    likesTemplate = item => <li key={item}>{item}</li>;

    renderLikes = () => {
        return this.state.likes.map(i => this.likesTemplate(i));
    }

    render() {
        return (
            <div>
                {this.state.persons.map(person => {
                return <li key={person.name}><IcoMoon icon="heart" onClick={() => {this.handleClick(person.name)}} />{person.name}</li>}
            )}

            <h2>Favorite Person</h2>
            <ul>
                {this.renderLikes()}
            </ul>
            </div>
        )
    }
}

Answer 1

正确的条件是

if (!(this.state.likes.filter(e => e.name === person.name).length > 0)) {
  // your code
}

条件的含义是：

this.state.likes.filter(e => e.name === person.name).length > 0) 只有当数组的元素与提供的 person 对象 name 匹配时，这才会过滤掉数组。它指出 person 已经存在于数组中

! 用于检查相反的条件，因为您只想在人员不存在时输入 if 语句

编辑 更好地阅读您的代码，这可以通过更简单、更简洁的方法来完成：

  addPerson = (person) => {
    let filteredPerson = this.state.likes.filter(like => like.name !== person.name);
    this.setState({
      likes: [...filteredPerson, person]
    })        
  }

查看这个有效的 sn-p： https://stackblitz.com/edit/react-jxebwg

Answer 2

您可以通过几种不同的方式来解决此问题。

编辑：现在我们知道 like 只是一个字符串数组

使用.includes()

handleClick = person => {
    const likes = this.state.likes
    //check to see if person has already liked 
    if (likes.includes(person)) {
       //user has already liked. Choose one option (1 or 2)
       
       //Option 1: create a new like array without the current user
       const newLikes = likes.filter((like) => like !== person)
   
       //Option 1: update state with new likes
       this.setState({
          likes: newLikes
       })

       //Option 2: or do nothing
       return;

    //this executes if the user has not liked yet
    } else {
      this.setState({
        likes: [...likes, person]
      })
    }    
};

所以我所说的“执行以下操作之一”取决于您希望您的功能如何表现。

选项 1： 如果您想创建一种切换效果，用户已经喜欢该项目。您应该选择选项一，我们在其中创建新的 arr 并更新状态。这将“不喜欢”，从喜欢的数组中删除用户。然后点击

选项 2： 就是什么都不做。如果用户点击按钮并且他们已经喜欢它，这只会保持状态不变。