Dostaje błąd wydaje mi się że return w card data nie exportuje się {react}

Question

dostaje bład

_components_CardData__WEBPACK_IMPORTED_MODULE_7__.default.map is not a  APP:9

Card Data 

import { useEffect } from "react";

let props = [];
let value = {};
export default function CardData() {
	useEffect(() => {
		window.addEventListener("storage", () => {
			Object.entries(localStorage).map(([valueJSON]) => {
				const valueStorage = JSON.parse(valueJSON);

				value = valueStorage;

				return console.log(value);
			});
		});
		props.push(value);
		console.log(props);
	});
	return props;
}

App 

import React from "react";
//import Navbar from "./components/Navbar";
//import Main from "./components/Main";
//import Card from "./components/Card";
//import Footer from "./components/Fotter";
//import Addcard from "./components/AddCard";
//import Pic from "./img/cards/pexels-merve-şahin-11161043.jpg";
import data from "./components/CardData";
const cards = data.map((item) => {
	return <Card key="{item.key}" Image={item.image} Country={item.country} Title={item.title} Cost={item.cost} />;
});
export default function App() {
	return (
		<div>
		//	<Navbar />
		//	<Main />
			<Card Image={Pic} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />
			{cards}
		//	<Addcard />
		//	<Footer />
		</div>
	);
}

 

Comments

Jeśli eksportujesz funkcję CardData, to:

import data from "./components/CardData";

zaimportowana zmienna data jest funkcją, a nie tablicą z danymi, więc użycie map na funkcji nie zadziała.

Może napisz co chcesz, żeby ten kod robił?

---

Ogólnie to cały kod ma za zadanie z addcard wysłać wartość do loclastorage a CardData przy zmienie(dodaniu) wartość do localstorage ma renderować nową kartę z propretisami z localstorage próbowałem robić bez funkcji i exportować sama tablice ale przez to nie działa Useeffect

Answer 1

Według mnie CardData powinien sam renderować rzeczy ze storage. Może przyjmować komponent, do którego ma przekazać rzeczy do wyrenderowania:

import { useEffect, useState } from "react";
 
export default function CardData({ RenderingComponent }) {
    const [storageStuff, setStorageStuff] = useState([]);

    useEffect(() => {
        const onStorage = () => {
            Object.entries(localStorage).map(([valueJSON]) => {
                const valueStorage = JSON.parse(valueJSON);
 
                setStorageStuff((prevStorageStuff) => [...prevStorageStuff, valueStorage]);
            });
        };

        window.addEventListener("storage", onStorage);

       return () => window.removeEventListener('storage', onStorage); // cleanup hook
    }, []);

    return storageStuff.map((item) => (
      <RenderingComponent 
        key={item.key}
        Image={item.image} 
        Country={item.country} 
        Title={item.title} 
        Cost={item.cost} 
      />;
    );
}

import CardData from "./components/CardData";

export default function App() {
    return (
        <div>
            <Card Image={Pic} Country="France" Title="Life lessons with Katie Zaferes" Cost={150} />
            <CardData RenderingComponent={Card} />
        </div>
    );
}

Przy okazji, jeśli podpinasz się pod storage event, to raczej chcesz to robić tylko raz, a nie na każde renderowanie komponentu. Więc do useEffect dobrze jest przekazać pustą tablicę zależności.

Comments

mam pytanie czy to coś zmienia jak do localstorage wysyła submit z forma 

import React, { useState } from "react";

export default function Addcard() {
	const [count, setCount] = useState(0);
	const [props1, setProps] = useState({
		key: "",
		image: "",
		country: "",
		title: "",
		cost: "",
	});

	const inputChange = ({ target }) => {
		const inputIdentity = target.dataset.identity;
		setProps((props1) => ({ ...props1, [inputIdentity]: target.value }));
	};

	const SendtoStorage = (event) => {
		window.localStorage.setItem(`@${props1.key}`, JSON.stringify(props1));

		setCount((count) => (count = 0));
		setProps(
			(props1) =>
				(props1 = {
					key: "",
					image: "",
					country: "",
					title: "",
					cost: "",
				})
		);
		event.preventDefault();
	};

	const plus = () => {
		setCount((count) => (count = 1));
	};

	return (
		<div className="Card-container Card-container-add">
			{count === 0 ? (
				<div className="Card-arrows">
					<span className="arrow-n-e">&#8598; </span>
					<span className="arrow-n-w"> &#8599; </span>
					<button className="addcard-button" onClick={plus}>
						+
					</button>
					<span className="arrow-s-e">&#8600; </span>
					<span className="arrow-s-w"> &#8601;</span>
				</div>
			) : (
				<div>
					<form className="Card-inputs" onSubmit={SendtoStorage}>
						<input className="addcard-inputs" id="input-0" onChange={inputChange} value={props1.key} placeholder="Name" data-identity="key"></input>
						<input className="addcard-inputs" id="input-1" onChange={inputChange} value={props1.image} placeholder="Image url" data-identity="image"></input>
						<input className="addcard-inputs" id="input-4" onChange={inputChange} value={props1.country} placeholder="Country" data-identity="country"></input>
						<input className="addcard-inputs" id="input-5" onChange={inputChange} value={props1.title} placeholder="Title" data-identity="title"></input>
						<input className="addcard-inputs" id="input-6" onChange={inputChange} value={props1.cost} placeholder="Cost" data-identity="cost"></input>
						<input type="submit" value="Save" id="sumbit" className="addcard-inputs-button"></input>
					</form>
				</div>
			)}
		</div>
	);
}

 

---

Z tego co widzę w specce, użycie formularza nie wymusza wysłania danych w nim zawartych na serwer - jest nawet wzmianka, że można z tymi danymi robić inne rzeczy:

No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.

Jeśli więc traktujesz formularz jako miejsce na zebranie danych, które potem umieszczasz w storage, to myślę, że jest to ok - dzięki formularzowi otrzymujesz zgrupowane dane, którymi łatwiej zarządzać (w razie czego jest też do dyspozycji FormData API).

Jeśli pytasz, czy submitowanie forma zmienia coś w kontekście Twojego problemu dotyczącego nasłuchu na storage event i późniejszy odczyt z niego danych, które wyświetlasz, to też nie widzę tutaj problemu; a jeśli to było dodatkowe pytanie, to je doprecyzuj.

---

Czyli rozumiem że ten kod co wysłałeś już renderuje Kartę jak znajduje się jakaś wartość w storage?

---

Tak powinno to działać, ale nie testowałem. Jeśli są jakieś błędy, to daj znać.

---

Przekopiowałem kod i mam coś takiego nie jak

w sensie nie ma nowych kart a są jakieś wartość w storage

---

Wstaw console.log w te miejsca i pokaż co wyświetli konsola (przy okazji, screeny lepiej wstawiać przez zewnętrzny serwis, np. imgur.com, bo na powyższym niewiele widać):

const onStorage = () => {
  Object.entries(localStorage).map(([valueJSON]) => {
    const valueStorage = JSON.parse(valueJSON);
    console.log('valueJSON:', valueJSON, ' /valueStorage:', valueStorage); // <----
  
    setStorageStuff((prevStorageStuff) => [...prevStorageStuff, valueStorage]);
  });
};

return storageStuff.map((item) => (
  console.log('item:', item, ' /RenderingComponent:', RenderingComponent), // <----

  <RenderingComponent 
    key={item.key}
    Image={item.image} 
    Country={item.country} 
    Title={item.title} 
    Cost={item.cost} 
  />
);

---

Na marginesie: storage event jest rzucany dla stron otwartych w innych kartach niż ta, w której zachodzi zmiana w storage.

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event

Note: This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

Jeśli więc zmieniasz storage w obrębie tej samej karty przeglądarki, to storage event nie będzie rzucony. W takim przypadku rzuć własny event (lub jakkolwiek inaczej powiadom inny kod), z miejsca w którym zmieniasz storage.

---

czyli zrobić lepiej to bez storage a same dany wysyłać do storagee?

konsola zwraca nic po wstawieniu tych console.log

---

zrobiłem coś takiego lecz i tak nie dodaje nowych a co najlepsze tworzy jedna pustą

To zamieniłem  CardData 

import { StoreProperties } from "./AddCard";	
setStorageStuff((prevStorageStuff) => [...prevStorageStuff, StoreProperties]);

i Dodałem do AddCard 

export const StoreProperties = React.createContext(null);

i w submit 

<StoreProperties.Provider value={props1}> </StoreProperties.Provider>

 

---

@ScriptyChris, Jest jakaś funkcja w react która w innym pliku wykonuje funkcje after submit w innym pliku

---

Jeśli event się nie wywołuje, to pewnie dlatego, że modyfikujesz storage w obrębie tej samej strony/karty w przeglądarce. 

Jest jakaś funkcja w react która w innym pliku wykonuje funkcje after submit w innym pliku

Teoretycznie możesz na submit event podpiąć się wszędzie, gdzie tylko masz dostęp do tego formularza w DOM, ale to łamie zasadę podzielności odpowiedzialności per komponent. Możesz stworzyć serwis - nawet na podstawie prostej implementacji wzorca obserwatora - który pozwoli na komunikację między komponentami.