Как избежать добавления в массив, если элемент уже существует - PullRequest
Новая
       19

Как избежать добавления в массив, если элемент уже существует

1 голос
/ 06 июня 2019

Я делаю Добавить в любимую функцию в 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>
        )
    }
}

Ответы [ 2 ]

2 голосов
/ 06 июня 2019

Правильное условие 

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 object name . Это указывает на то, что персона уже присутствует в массиве

! используется для проверки противоположного условия, потому что вы хотите ввести в свой оператор if , только если человек не существует

EDIT Чтение лучше вашего кода, это можно сделать с помощью более простого и понятного метода: 

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

Проверьте этот рабочий фрагмент: https://stackblitz.com/edit/react-jxebwg

0 голосов
/ 06 июня 2019

Вы можете подойти к этому несколькими способами.

Редактировать: Теперь, когда мы знаем, что лайки - это просто массив строк

Использование .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: было бы просто ничего не делать. если пользователь нажимает кнопку, и она ему уже понравилась, это только сохраняет статус.

...