Πώς να αντιστοιχίσετε έναν ένθετο πίνακα σε ένα στοιχείο React

Οι περισσότερες σύγχρονες εφαρμογές καταναλώνουν εξωτερικά δεδομένα από άλλες εφαρμογές και εργαλεία μέσω API. Αυτό Τα δεδομένα έρχονται σε όλους τους τύπους σχημάτων και είναι στο χέρι σας να τα αποδομήσετε μέχρι να πετύχετε αυτό που θέλετε χρήση. Μεταξύ αυτών των σχημάτων είναι αντικείμενα δεδομένων που περιέχουν ένθετους πίνακες. Μπορεί να είναι δύσκολη η απόδοση αυτού του είδους δεδομένων. Αυτό το άρθρο θα σας διδάξει πώς να αντιστοιχίσετε έναν ένθετο πίνακα σε ένα στοιχείο React.

Χρήση της συνάρτησης χάρτη

Η συνάρτηση χάρτη κάνει βρόχο πάνω από τα στοιχεία ενός δεδομένου πίνακα και επιστρέφει την καθορισμένη δήλωση ή τον κωδικό για καθένα.

Για έναν επίπεδο πίνακα, η συνάρτηση χάρτη λειτουργεί ως εξής:

const arr = ['ένα', 'σι', 'ντο'];
συνθ result1 = arr.map (στοιχείο => {
ΕΠΙΣΤΡΟΦΗ στοιχείο;
});

Στο React, πρέπει να τυλίξετε τη συνάρτηση χάρτη με σγουρές αγκύλες και να χρησιμοποιήσετε ένα λειτουργία βέλους για να επιστρέψετε ένα στοιχείο κόμβου για κάθε επανάληψη. Τα στοιχεία στον επίπεδο πίνακα παραπάνω μπορούν να αποδοθούν ως στοιχεία JSX ως εξής:

const arr = ['ένα', 'σι', 'ντο']; 
λειτουργίαApp () {
ΕΠΙΣΤΡΟΦΗ (
<>
 {arr.map((στοιχείο, ευρετήριο) => {
<κλειδί span={index}>{ένα}</span>
 })}
</>
	)
}

Σημειώστε ότι εκχωρείτε ένα κλειδί σε κάθε στοιχείο που επιστρέφει η συνάρτηση χάρτη. Αυτό βοηθά το React να αναγνωρίσει στοιχεία που έχουν αλλάξει ή αφαιρεθεί. Αυτό είναι σημαντικό κατά τη διαδικασία συμφιλίωσης.

Αντιστοίχιση πάνω από έναν ένθετο πίνακα σε ένα στοιχείο React

Ένας ένθετος πίνακας είναι παρόμοιος με έναν πίνακα που περιέχει έναν άλλο πίνακα. Για παράδειγμα, ο παρακάτω πίνακας συνταγών περιέχει ένα αντικείμενο με έναν πίνακα.

συνθ συνταγές = [
 {
 id: 716429,
 τίτλος: "Ζυμαρικά με σκόρδο, κρεμμύδι, κουνουπίδι & Τριμμένη φρυγανιά",
 εικόνα: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 Τύποι πιάτων: [
"μεσημεριανό",
"κύριο πιάτο",
"κυρίως πιάτο",
"βραδινό"
 ],
 συνταγή: {
// δεδομένα συνταγής
 }
 }
]

Για δεδομένα όπως αυτό με ένθετους πίνακες, θα πρέπει να χρησιμοποιήσετε μια συνάρτηση χάρτη για κάθε πίνακα.

Σε αυτό το παράδειγμα, θα αντιστοιχίσετε τον πίνακα δεδομένων όπως φαίνεται παρακάτω:

εξαγωγήΠροκαθορισμένολειτουργίαΣυνταγές() {
ΕΠΙΣΤΡΟΦΗ (
<div>
 {recipes.map((συνταγή) => {
 ΕΠΙΣΤΡΟΦΗ <κλειδί div={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="εικόνα συνταγής" />
 {recipe.dishTypes.map((τύπος, ευρετήριο) => {
 ΕΠΙΣΤΡΟΦΗ <κλειδί span={index}>{τύπος}</span>
 })}
</div>
 })}
</div>
 )
}

Το στοιχείο Συνταγές θα αποδώσει το div στοιχείο που περιέχει τα δεδομένα συνταγών για κάθε συνταγή στον πίνακα συνταγών.

Εργασία με πίνακες σε JavaScript

Η JavaScript προσφέρει μια μεγάλη ποικιλία μεθόδων πίνακα που κάνουν την εργασία με πίνακες απλούστερη. Αυτό το άρθρο έδειξε τον τρόπο απόδοσης δεδομένων από έναν ένθετο πίνακα χρησιμοποιώντας μια μέθοδο πίνακα χαρτών. Εκτός από τον χάρτη, υπάρχουν επίσης μέθοδοι που σας βοηθούν να προωθήσετε δεδομένα σε έναν πίνακα, να συνδέσετε δύο πίνακες ή ακόμα και να ταξινομήσετε έναν πίνακα.