iXdi - Σύγχρονος προγραμματισμός

Γιατί απαιτείται τελεστής spread όταν χρησιμοποιείται το .map() στο React, αλλά όχι σε απλή JavaScript;

Σε μια εφαρμογή React, μεταβιβάζω αυτόν τον πίνακα αντικειμένων σε ένα στοιχείο:

const flashcards = [
    {
        "back": "bbb1",
        "front": "fff1",
        "id": 21
    },
    {
        "back": "bbb2",
        "front": "fff2",
        "id": 22
    },
    {
        "back": "bbb3",
        "front": "fff3",
        "id": 20
    }
];

Στο στοιχείο, όταν αντιστοιχίζω μέσω του πίνακα, γιατί χρειάζεται να έχω έναν τελεστή διασποράς για να στείλω μεμονωμένα στοιχεία από τον πίνακα στο επόμενο χαμηλότερο στοιχείο (Flashcard), π.χ. σαν αυτό:

render() {
    return (
        <div className="app">
            <div>
                {this.props.flashcards.map(flashcard =>
                    <Flashcard {...flashcard} key={flashcard.id} />
                    )}
            </div>
        </div>
    );
}

Αυτό φαίνεται περιττό, καθώς όταν χρησιμοποιώ χάρτη σε απλή JavaScript στον ίδιο πίνακα, δεν χρειάζομαι τον τελεστή spread, π.χ.

flashcards.map(flashcard => console.log(flashcard.front));
reactjs javascript
17.08.2020

  • Η flashcards.map(flashcard => console.log(flashcard.front)); δεν είναι καθόλου η ίδια λειτουργία με την παραπάνω. Πρώτα απ 'όλα, είναι θεμελιωδώς λάθος: .map() είναι για τη μετατροπή των περιεχομένων του πίνακα σε έναν νέο πίνακα, επομένως η χρήση ενός απλού αρχείου καταγραφής δεν είναι η έννοια του .map. Είναι επίσης η ουσία του ζητήματος - μια σωστή αντιστοίχιση στο JS θα ήταν flashcards.map(flashcard => {...flashcard, [key] = flashcard.id}) που είναι πλέον εντυπωσιακά παρόμοια με το πρώτο παράδειγμα. 17.08.2020
  • Ευχαριστώ @VLAZ, αυτή η γνώση με βοήθησε να το καταλάβω. Κατάλαβα το παράδειγμά σας, κάτι που είναι λογικό, αλλά πρέπει να περιβάλετε τις αγκύλες με παρενθέσεις για να υποδείξετε ότι οι αγκύλες προορίζονται να δημιουργήσουν ένα αντικείμενο και δεν είναι αγκύλες συνάρτησης: const frontFlashcards = flashcards.map(flashcard => ({...flashcard, key: flashcard.id})); 17.08.2020
  • Ναι, συγγνώμη - το κακό μου είναι εκεί. Χρειάζεστε όντως () γύρω από αυτό. Είναι μια συντακτική ιδιορρυθμία διαφορετικά το {} ερμηνεύεται ως το σώμα, όχι ως αντικείμενο κυριολεκτικά. 17.08.2020

Απαντήσεις:


1

{...flashcard} - Αυτό βασικά διαδίδει τις ιδιότητες στο αντικείμενο flashcard στο αντικείμενο props που θα λάβει το στοιχείο Flashcard.

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

Σκεφτείτε αυτό

<Flashcard {...flashcard} key={flashcard.id} />

ως συντομότερος τρόπος γραφής αυτού:

<Flashcard
   key={flashcard.id}
   back={flashcard.back}
   front={flashcard.front}
   id={flashcard.id}
/>
17.08.2020
  • Εντάξει, νομίζω ότι η σύγχυσή μου εδώ ήταν ότι έρχομαι από το Vue.js στο React και απλώς υπέθεσα ότι κάποιος θα μπορούσε να περάσει ολόκληρο το αντικείμενο της flashcard όπως συνηθίζω να κάνω στο Vue.js, π.χ. <span v-html="buildNiceCategoryHeader(flashcard)"></span> ή @click="flipFlashcard(flashcard)". Δεν είναι δυνατό αυτό στο React/JSX; 17.08.2020
  • Μπορείτε να περάσετε ολόκληρο το flashcard αντικείμενο ---› <Flashcard flashcard={flashcard} />. Το αντικείμενο props θα έχει τώρα μια ιδιότητα με το όνομα flashcard της οποίας η τιμή θα είναι αυτό το αντικείμενο flashcard. Η διαφορά μεταξύ {...flashcard} και flashcard={flashcard} είναι ότι η πρώτη θα προσθέσει κάθε ιδιότητα του αντικειμένου flashcard στο αντικείμενο props ενώ η flashcard={flashcard} θα προσθέσει μια ιδιότητα flashcard στο αντικείμενο props. 17.08.2020

    • 2

    Επειδή το props προοριζόταν να ρέει προς μία κατεύθυνση, η οποία είναι από γονέα σε παιδί. Και όταν έχετε ένα στηρίγμα που είναι τιμή αναφοράς όπως array ή object. Οποιαδήποτε λειτουργία εγγραφής σε αυτήν θα αλλάξει την τιμή στη μνήμη reference, η οποία θα τροποποιήσει τη βάση από το θυγατρικό στοιχείο. Ως εκ τούτου, destructing δημιουργεί μια νέα αναφορά μνήμης και την προστατεύει από την τροποποίηση

    17.08.2020
  • Αυτό μου συνέβη, αλλά το στοιχείο Flashcard.js λαμβάνει ένα αντικείμενο flashcard, π.χ. const Flashcard = (flashcard) => ( και αν πραγματικά στέλνω πολλές παραμέτρους, γιατί δεν πρέπει να λαμβάνω την καθεμία ξεχωριστά όπως π.χ. const Flashcard = (front, back, id) => (; 17.08.2020
  • @EdwardTanguay Εάν μεταβιβάζετε props στο στοιχείο Flashcard ως <Flashcard {...flashcard} />, τότε θα πρέπει να τα καταστρέψετε από το αντικείμενο props ---› const Flashcard = ({ front, back, id }) => ( και αν περάσετε ολόκληρο το αντικείμενο flashcard ως <Flashcard flashcard={flashcard} />, τότε θα πρέπει να καταστρέψετε την ιδιότητα flashcard από το αντικείμενο props - --› const Flashcard = ({ flashcard }) => (. Το στοιχείο δεν λαμβάνει απευθείας τα στηρίγματα, αντίθετα, κάθε στηρίγματα μεταβιβάζεται στο στοιχείο ως ιδιότητα του αντικειμένου props. 17.08.2020

    • 3

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

     {this.props.flashcards.map(flashcard =>
      <Flashcard back={flashcard.back} front={flashcard.front} key={flashcard.id} />
  )}
    17.08.2020
    Νέα υλικά
    The Perpetual Student: Γιατί ένας Μηχανικός Λογισμικού μαθαίνει πάντα
    Στον ταχέως εξελισσόμενο κόσμο της τεχνολογίας, οι μηχανικοί λογισμικού μαθαίνουν συνεχώς. Ο τομέας της ανάπτυξης λογισμικού είναι δυναμικός, με τα εργαλεία, τις γλώσσες, τα πλαίσια και τις..
    Καθαρισμός δεδομένων, Επιλογή χαρακτηριστικών, Μοντελοποίηση και Ερμηνευσιμότητα
    Ο καθαρισμός δεδομένων, η επιλογή χαρακτηριστικών, η μοντελοποίηση και η ερμηνευτικότητα είναι κρίσιμα βήματα για την ανάπτυξη ενός επιτυχημένου μοντέλου μηχανικής εκμάθησης. Τα ακριβή και..
    Code Smell 210 - Dynamic Properties
    Η τεμπελιά και η μαγεία φέρνουν ελαττώματα TL;DR: Να είστε ξεκάθαροι με τα χαρακτηριστικά σας Προβλήματα Ευανάγνωστο Ορισμός πεδίου εφαρμογής Απαρατήρητα τυπογραφικά λάθη..
    Οπτικοποίηση δεδομένων με γραφήματα Google
    του Ejiro Thankgod Η οπτικοποίηση δεδομένων είναι μια εξαιρετική προσέγγιση για την εμφάνιση δεδομένων και τη συμμετοχή κοινού. Ο ανθρώπινος νους είναι συχνά καλύτερος στο να θυμάται..
    Το όνομά μου είναι Abdul Qudus.abd
    Το όνομά μου είναι Abdul Qudus.abd Είμαι διαδικτυακός συγγραφέας και γράφω άρθρα. Έχω 3ετή εμπειρία στη διαδικτυακή συγγραφή. οπότε θα είμαι ο καλύτερος συγγραφέας στην πλατφόρμα σας. είμαι ο..
    Το Python Selenium Web Scraping σας κατέβασε το 2023; Εκκαθαρίστε την προσωρινή μνήμη και ενισχύστε τα αποτελέσματά σας!
    Η απόξεση ιστού με το Python Selenium είναι ένα εξαιρετικό εργαλείο για την εξαγωγή δεδομένων από ιστοσελίδες. Ωστόσο, περιστασιακά, οι ιστοσελίδες ενδέχεται να αποτύχουν να φορτώσουν ή να..
    Έννοιες JavaScript που πρέπει να γνωρίζετε για να ξεκινήσετε με το React
    Αφού είδα αυτή την ερώτηση να τίθεται αμέτρητες φορές, πιστεύω ότι μπορεί να είναι χρήσιμο σε πολλούς ανθρώπους εκεί έξω να έχουν μια σαφή κατανόηση του τι χρειάζεται να είναι γνωστό στο..