Проблема, отображаемая данные из локального хранилища в приложении React ⇐ Html

[Anonymous]

У меня есть проблемы с рендерингом данных из локального хранилища на каждом обновлении или перезагрузке. Это отображает только жесткие данные, но не данные, которые я сохраняю в LS. Он показывает данные в LS, но не рендеринг. Если бы кто -то мог бы объяснить или рассказать мне, что не так, или дать мне направление, чтобы сделать что -то лучшее, будет благодарным. Я довольно новый в Реактом был бы оценить для понимания. Я положил несколько фиктивных данных. Я отправил компоненты, которые могут повлиять. < /P>
import { useState, useEffect } from "react";
//COMPONENTS:
import ScrollToTop from "./components/ScrollToTop";
import Footer from "./components/Footer";
import Home from "./components/Home";
import NavBar from "./components/NavBar";
import PhoneBook from "./components/PhoneBook";

function App() {
const date = new Date().toLocaleDateString();
const [contacts, setContacts] = useState([
{
id: Math.random().toString(36).substr(2, 9),
fullName: "Vekjko Petrovic",
address: "121 Town Commons Way Phoenix, AZ, 45215",
phone: 123_465_689,
date,
},
{
id: Math.random().toString(36).substr(2, 9),
fullName: "Marko Petrovic",
address: "Srbina 35, 11300 Smederevo Srbija",
phone: 256_269_866,
date,
},
{
id: Math.random().toString(36).substr(2, 9),
fullName: "Michael Jackson",
address: "52 City St, Detroit, Mi, 46218",
phone: 359_525_555,
date,
},
{
id: Math.random().toString(36).substr(2, 9),
fullName: "Vanessa Parady",
address: "11 Beogradska Beograd, SRB, 11000",
phone: 123_465_689,
date,
},
]);

useEffect(() => {
const savedContacts = JSON.parse(localStorage.getItem("contacts"));

if (savedContacts) {
setContacts(savedContacts);
}
}, []);

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

const [searchContact, setSearchContact] = useState("");

const [theme, setTheme] = useState("dark");
const changeTheme = () => {
theme === "dark" ? setTheme("light") : setTheme("dark");
};

const addContact = (fullName, phone, address, email) => {
const newContacts = {
id: Math.random().toString(36).substr(2, 9),
fullName,
address,
phone,
email,
date,
};
const newContact = [...contacts, newContacts];
setContacts(newContact);
};

const deleteContact = (id) => {
const remainedContacts = contacts.filter((item) => item.id !== id);
setContacts(remainedContacts);
};

return (




contacts={contacts.filter((contact) =>
contact.fullName.toLowerCase().includes(searchContact)
)}
handleAddContact={addContact}
deleteContact={deleteContact}
handleSearchContacts={setSearchContact}
/>


);
}

export default App;

import React from "react";

import "../index.css";

//ASSETS:

import NewContact from "./NewContact";
import Contact from "./Contact";
import Search from "./Search";

function PhoneBook({
contacts,
handleAddContact,
deleteContact,
handleSearchContacts,
}) {
return (



{contacts.map((contact) => {
return (

);
})}



);
}

export default PhoneBook;

import React from "react";
import profile from "../assets/images/profile.png";
import { MdDeleteForever } from "react-icons/md";
function Contact({ fullName, address, phone, email, id, date, deleteContact }) {
return (



{fullName}





{" "}
Address:
{address}

Phone: {phone}

{" "}
Email: {email}

deleteContact(id)}
className="delete-icon"
size="1.3rem"
/>

Date:
{date}


);
}

export default Contact;

import React, { useState } from "react";

function NewContact({ handleAddContact }) {
const [fullName, setFullName] = useState("");
const [phone, setPhone] = useState("");
const [address, setAddress] = useState("");
const [email, setEmail] = useState("");

const handleSaveClick = () => {
if (!(fullName.trim().length > 0)) {
return;
}
handleAddContact(fullName, phone, address, email);
setFullName("");
setPhone("");
setAddress("");
setEmail("");
};

return (

{" "}

Create New Contact

Full Name:
setFullName(e.target.value)}
/>
Address:
setAddress(e.target.value)}
/>
Phone:
setPhone(e.target.value)}
/>
Email:
setEmail(e.target.value)}
/>

{/*

*/}


SAVE



);
}

export default NewContact;
import styled from "styled-components";
import React from "react";
import { MdSearch } from "react-icons/md";

//STYLES
import "../index.css";

function Search({ handleSearchContacts }) {
return (


handleSearchContacts(e.target.value)}
/>

);
}
export default Search;


Подробнее здесь: https://stackoverflow.com/questions/734 ... -react-app