React - 删除功能不起作用。 uuid() 不生成 ID

Question

Please help me, Delete Icon is not functional, when I click on delete icon it delete all the contact, on refreshing. it returns all the previous contacts. I am also using localStorage.

I have added all the Component of the React App Project.

App.js

import { v4 as uuid } from "uuid";

const App = () => {
  
  const LOCAL_STORAGE_KEY = "contacts";
  const [contacts, setContacts] = useState([]);

  const addContactHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, { id: uuid(), ...contact }]);
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });
    setContacts(newContactList);
  };

 
  useEffect(() => {
    const retrieveContacts = JSON.parse(
      localStorage.getItem(LOCAL_STORAGE_KEY)
    );
    if (retrieveContacts) {
      setContacts(retrieveContacts);
    }
  }, []);


  useEffect(() => {
    if (contacts.length) {
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
    }
  }, [contacts]);

  return (
    <>
      <div className="app">
        <Header />
        <AddContact addContactHandler={addContactHandler} />
        <ContactList contacts={contacts} getContactId={removeContactHandler} />
      </div>
    </>
  );
};

export default App;

ContactList.js

const ContactList = (props) => {
  const deleteContactHandler = (id) => {
    props.getContactId(id);
  };

  const renderContactList = props.contacts.map((contact) => {
    return (
      <>
        <ContactCard
          contact={contact}
          clickHandler={deleteContactHandler}
          key={contact.id}
        />
      </>
    );
  });

  return (
    <>
      <div className="contactList">
        <h2 className="contactList__title">Contact List</h2>
        <div className="contactList__container">
          {renderContactList}
        </div>
      </div>
    </>
  );
};

ContactCard.js

const ContactCard = (props) => {
  const { id, name, email } = props.contact;

  return (
    <>
      <div className="contactCard">
        <div className="contactCard__contact">
          <img
            className="contactCard__userIcon"
            src={userIcon}
            alt="user-icon"
          />
          <div className="contactCard__userName">          
            <h2>{name}</h2>       
            <p>{email}</p>
          </div>
        </div>
        <div className="contactCard__delIcon">
          <img
            src={delIcon}
            alt="del-icon"
            onClick={() => props.clickHandler(id)}
          />
        </div>
      </div>
    </>
  );
};

export default ContactCard;

I have researched out the references. Unable to get the Solution.

Answer 1

The effect to store the contacts do not save empty arrays. Thats why you get the old array after refreshing your page.

Just remove the condition.

useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

But you should consider to remove this effect. Save the contacts directly after setting the state instead.

const addContactHandler = (contact) => {
    console.log(contact);
    const newContactList = [...contacts, { id: uuid(), ...contact }];
    setContacts(newContactList);
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newContactList));
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });
    setContacts(newContactList);
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newContactList));
  };