Ενημέρωση Δεδομένων με FormData στο React Router

Έχουμε τη συνάρτηση updateProduct για την ενημέρωση των δεδομένων του προϊόντος στην αποθήκη. Τώρα ας προχωρήσουμε στα δεδομένα από την φόρμα επεξεργασίας μας.

Κατά την υποβολή μιας HTML φόρμας, το πρόγραμμα περιήγησης δημιουργεί ένα αντικείμενο FormData με τα δεδομένα και τα στέλνει στο σώμα του αιτήματος στον διακομιστή. Επιπλέον, η τιμή κάθε πεδίου εισόδου εξάγεται στο αντικείμενο από το χαρακτηριστικό name (γι' αυτό τα χρειαζόμασταν στη φόρμα, θυμάστε;). Τώρα γνωρίζουμε ότι το React Router στέλνει τα αιτήματα όχι στον διακομιστή, αλλά στη μέθοδο action της διαδρομής μας, αντίστοιχα, εκεί θα καταλήξει και το FormData. Ας δουλέψουμε με αυτό.

Για αρχή, ας ανοίξουμε το αρχείο μας edit.jsx και να εισάγουμε την updateProduct:

import { updateProduct } from '../forStorage';

Στη συνέχεια, θα γράψουμε τη συνάρτηση για το action του αντικειμένου διαδρομής, όπως κάναμε πριν. Θα την προσθέσουμε αμέσως μετά τη συνάρτηση loader. Σε αυτήν, θα μεταβιβάζουμε το request μας και τις παραμέτρους URL:

export async function action({ request, params }) {}

Από το αίτημα, θα λάβουμε το FormData, στη συνέχεια θα εξαγάγουμε τα δεδομένα του σε μορφή αντικειμένου, που περιέχει ζεύγη κλειδί: τιμή και με τη βοήθεια της updateProduct θα στείλουμε αυτά τα δεδομένα στην αποθήκη:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Απομένει μόνο να πάμε στο main.jsx και να προσθέσουμε τη συνάρτηση action στο αντικείμενο της διαδρομής επεξεργασίας. Ας εισάγουμε την action:

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

Και να την προσθέσουμε στο αντικείμενο διαδρομής επεξεργασίας:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

Τρέξτε τώρα την εφαρμογή, προσθέστε μερικά προϊόντα στη λίστα, στη συνέχεια κάνοντας κλικ πάνω τους συμπληρώστε τη φόρμα και πατήστε το κουμπί αποθήκευσης. Μην ξεχάσετε να πάτε στον πίνακα εργαλείων προγραμματιστή στην ενότητα localforage και να ανανεώσετε την αποθήκη. Τώρα στην ενότητα keyvaluespairs μπορούμε να δούμε τα αντικείμενα στον πίνακα products με τα δεδομένα που εισαγάγαμε.

Πάρτε την εφαρμογή που δημιουργήσατε στα αποθετήρια από το προηγούμενο μάθημα. Χρησιμοποιώντας τα υλικά του μαθήματος, δημιουργήστε τη συνάρτηση action για τη διαδρομή επεξεργασίας δεδομένων μαθητή, προσθέστε την στο αντικείμενο διαδρομής επεξεργασίας. Ανοίξτε τον πίνακα εργαλείων προγραμματιστή και βεβαιωθείτε ότι κατά τις αλλαγές, τα ενημερωμένα δεδομένα πράγματι εμφανίζονται στην καρτέλα localforage.