реагировать на проблемы с функцией удаления - PullRequest
Новая
       9

реагировать на проблемы с функцией удаления

0 голосов
/ 13 октября 2018

Итак, я пытался выяснить функцию удаления для приложения контактов, которое я пытаюсь сделать, когда я учусь реагировать.Пока у меня есть функция removeContact, которая частично работает.Он удалит контакт, но не удалит правильный контакт, вместо этого он всегда удалит первый контакт.Я застрял в этой проблеме в течение последних двух недель, и из того, что я вижу, я думаю, что я не получаю функцию для правильного принятия идентификатора из моего контактного объекта.Это сводит меня с ума, поэтому любая помощь будет оценена.Спасибо!Ниже три моих компонента;приложение, список контактов и contactCard. 

import React, { Component } from 'react';
import NavBar from './components/Menu/NavBar';
import SideBar from './components/Menu/SideBar';
import AddForm from './components/Menu/AddForm';
import ContactList from './components/Contacts/ContactList';






class App extends Component {
  constructor(props){
    super(props);
    this.state = {

      contacts: [
        {first:'Josh',last:'McDaniel',number:'555-666-7777',email:'joshmcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
        {first:'Briana',last:'McDaniel',number:'888-999-1111',email:'brianamcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
        {first:'Finn',last:'McDaniel',number:'222-333-4444',email:'finnmcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
        {first:'Josh',last:'McDaniel',number:'555-666-7777',email:'joshmcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
        {first:'Briana',last:'McDaniel',number:'888-999-1111',email:'brianamcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
        {first:'Finn',last:'McDaniel',number:'222-333-4444',email:'finnmcdaniel@gmail.com',area:'Mount Morris, Ny',instagram:'https://www.instagram.com/mcdanije/', facebook:'https://www.facebook.com/josh.mcdaniel.5201', linkedin:'https://www.linkedin.com/in/mcdanije/',twitter:'https://twitter.com/'},
      ],
        toggle:true,
        class: 'modalClose', 
        searchField:'',

        first: '',
        last: '',
        number: '',
        email:'',
        area:'',
        instagram: '',
        facebook: '',
        linkedin:'',
        twitter:''
            }
    }



  //functions for modal start//
addModalToggle = () => {
   this.setState({class:'modal'})
}
closeModalToggle = () =>{
  this.setState({class:'modalClose'})
}
  //functions for modal start//

  //functions that capture form data start//
firstChange = (event) => {
  this.setState({first:event.target.value})
  console.log(this.state.first)
}
lastChange = (event) => {
  this.setState({last:event.target.value})
  console.log(this.state.last)
}
numberChange = (event) => {
  this.setState({number:event.target.value})
  console.log(this.state.number)
}
emailChange = (event) => {
  this.setState({email:event.target.value})
  console.log(this.state.email)
}
locationChange = (event) => {
  this.setState({area:event.target.value})
  console.log(this.state.area)
}
instagramChange = (event) => {
  this.setState({instagram:event.target.value})
}
  //functions that capture form data end//

  //logic for adding contact object to state start//
submitData = (event) => {
    if (this.state.first==''||this.state.last==''||this.state.number==''||this.state.email==''||this.state.area==''){
      alert('Please Fill In All Fields')
      event.preventDefault();
    }else {
 let newContact = {
    first:this.state.first,
    last:this.state.last,
    number:this.state.number,
    email:this.state.email,
    area:this.state.area,
    instagram:this.state.instagram,
    facebook:this.state.facebook,
    linkedin:this.state.linkedin,
    twitter:this.state.twitter
  }


this.setState({contacts:this.state.contacts.concat([newContact])})
  document.getElementById("form").reset();
this.setState({class:'modalClose'})
this.setState({
  first:'',
  last:'',
  number:'',
  email:'',
  area:'',
  instagram:'',
  facebook:'',
  linkedin:'',
  twitter:''
})
event.preventDefault();
    }
}
  //logic for adding contact object to state end//

  searchFieldChange = (event) => {
    this.setState({searchField:event.target.value})
  }

  /*removeContacts = (event) => {
    let array = this.state.contacts; 
    let index = array.indexOf(event.target.value)
    array.splice(index,1);
    this.setState({contacts: array});
  }*/

  /*removeContacts = (id) =>{
    this.setState({
      contacts:this.state.contacts.filter((contacts,id)=> contacts.id != id)
    })
  }  */
  removeContacts = (key) => {
    const contacts = this.state.contacts; 
    contacts.splice(key,1);
    this.setState({contacts: contacts});
  }



  render() {
    const {contacts, searchField} = this.state;
    const filteredContacts =contacts.filter(contacts =>{
      return contacts.first/* this is for side bar letters [0]*/.toLowerCase().includes(searchField.toLowerCase());
    })
    return (
      <div className='container'>
        <NavBar         
        modalToggle={this.addModalToggle} 
        search={this.searchFieldChange}
        />
        <AddForm  
        clear={this.clearBtn}
        closeModal={this.closeModalToggle}
        showAdd={this.state.class} 
        submitData={this.submitData} 
        firstChange={this.firstChange} 
        lastChange={this.lastChange} 
        numberChange={this.numberChange}
        emailChange = {this.emailChange}
        locationChange = {this.locationChange}
        instagramChange = {this.instagramChange}
        facebookChange = {this.facebookChange}
        linkedinChange = {this.linkedinChange}
        twitterChange = {this.twitterChange}
        />
        <ContactList 
        contacts={filteredContacts} 
        removeContacts={this.removeContacts}
        />
      </div>
    );
  }
}

export default App;



import React from 'react';
import ContactCard from './ContactCard';

const ContactList = ({contacts,removeContacts}) =>{


    return (
        <div className = 'contactDisplay' >

        {contacts.map((contact,i) =>{
            return (
                <ContactCard 
                /*key={i} 
                id={i}
                first={contacts[i].first} 
                last={contacts[i].last} 
                email={contacts[i].email} 
                number={contacts[i].number} 
                area={contacts[i].area} 
                instagram={contacts[i].instagram}
                facebook={contacts[i].facebook}
                linkedin={contacts[i].linkedin}
                twitter={contacts[i].twitter}*/
                contacts={contacts[i]}
                removeContacts={removeContacts}
                />
            );
        })
        }
        </div>
    );
}

export default ContactList;

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram } from '@fortawesome/free-brands-svg-icons';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';


const ContactCard = ({removeContacts,contacts}) =>{
    const {first,last,number,email,area,instagram,facebook,linkedin,twitter} = contacts;

    return (
        <div className='contactCard'>
            <div className='cardTop'>
               <img className='contactPhoto' src= 'https://via.placeholder.com/130x130' alt='person'/> 
                <h2>{first} {last} <button className='editBtn'><FontAwesomeIcon icon={faPencilAlt} /> </button><button className='editBtn' onClick={ removeContacts }><FontAwesomeIcon icon={faTrashAlt} /></button></h2> 
                <hr/>
            </div>
                <div className= 'cardBottom'>
                    <p>Phone Number: {number} </p>
                    <p>Email Address: {email}</p>
                    <p>Location: {area}</p>
                </div>
                <footer className='cardFooter'> 
                    <button type='button' className='instagram'><a href= {instagram} target="_blank">
                    <FontAwesomeIcon icon={faInstagram} />
                    </a></button>
                    <button type='button' className='facebook'><a href= {facebook} target="_blank">
                    <FontAwesomeIcon icon={faFacebookF} />
                    </a></button>
                    <button type='button' className='linkedin'><a href= {linkedin} target="_blank">
                    <FontAwesomeIcon icon={faLinkedinIn} />
                    </a></button>
                    <button type='button' className='twitter'><a href= {twitter} target="_blank">
                    <FontAwesomeIcon icon={faTwitter} />
                    </a></button>
                </footer>
            </div>

    );
}

export default ContactCard;

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

Вы никогда не должны использовать ключи для идентификации объектов в вашем массиве, они используются исключительно как реакция как уникальный идентификатор объекта в списке JSX.Вам нужно использовать уникальный идентификатор, который находится в вашем массиве, чтобы найти элемент для его удаления, поэтому вы должны либо ввести свойство id в ваш массив, либо использовать существующий уникальный ключ, такой как электронная почта.Рассмотрим следующую настройку: 

removeContacts = (email) => {
    const { contacts } = this.state;
    const newContacts = contacts.filter(item => item.email !== email);
    this.setState({ contacts: newContacts });
}

const ContactList = ({contacts,removeContacts}) =>{
    return (
        <div className = 'contactDisplay' >

        {contacts.map((contact,i) =>{
            return (
                <ContactCard 
                /*key={i} 
                id={i}
                first={contacts[i].first} 
                last={contacts[i].last} 
                email={contacts[i].email} 
                number={contacts[i].number} 
                area={contacts[i].area} 
                instagram={contacts[i].instagram}
                facebook={contacts[i].facebook}
                linkedin={contacts[i].linkedin}
                twitter={contacts[i].twitter}*/
                contacts={contacts[i]}
                removeContacts={() => removeContacts(contact.email)}
                />
            );
        })
        }
        </div>
    );
}
0 голосов
/ 13 октября 2018

Проблема в том, что вы никогда не передаете ключ своей функции.
Происходит следующее: 

t = [1, 2, 3]
t.splice(undefined, 1)
// now, t = [2, 3]

undefined преобразуется в 0. Таким образом, вы всегда удаляете первый элемент.

Кроме того, вы фильтруете свой список контактов в App, прежде чем передать его в ContactList, который вызывает метод remove.Таким образом, ключ, доступный в ContactList, не соответствует индексу в списке состояний.Попробуйте использовать instagram, который должен быть уникальным.
Затем код обновляется как: 

const ContactList = ({contacts,removeContacts}) =>{
    return (
        <div className = 'contactDisplay' >
        {contacts.map((contact,i) =>{
            return (
                <ContactCard 
                ...
                contacts={contacts[i]}
                removeContacts={() => removeContacts(contact.instagram)}
                />
            );
        })
        }
        </div>
    );
}

и 

removeContacts = (insta) => {
  const contacts = this.state.contacts; 
  const idx = contacts.findIndex(c => c.instagram === insta);
  if (idx >= 0) {
    contacts.splice(idx ,1);
    this.setState({contacts: contacts});
  }
}

Cheers

...