reactjs - Why is a spread operator required when using .map() in React, but not in plain JavaScript? - Stack Overflow

admin管理员组

文章数量:1394990

In a React application, I'm passing in this array of objects to a ponent:

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

In the ponent, when I map through the array, why do I need to have a spread operator in order to send individual items from the array to the next lower ponent (Flashcard), e.g. like this:

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

This seems superfluous, since when I use map in plain JavaScript on the same array, I do not need the spread operator, e.g.:

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

In a React application, I'm passing in this array of objects to a ponent:

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

In the ponent, when I map through the array, why do I need to have a spread operator in order to send individual items from the array to the next lower ponent (Flashcard), e.g. like this:

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

This seems superfluous, since when I use map in plain JavaScript on the same array, I do not need the spread operator, e.g.:

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

• javascript
• reactjs

Share Improve this question Follow asked Aug 17, 2020 at 10:02 Edward TanguayEdward Tanguay 194k321321 gold badges725725 silver badges1.1k1.1k bronze badges 3

• 1 flashcards.map(flashcard => console.log(flashcard.front)); is not at all the same operation as the above one. First of all, it's funamentally wrong: .map() is for transforming the array's contents to a new array, so a using a simple log is not what .map is about. It's also the crux of the issue - a proper mapping in JS would be flashcards.map(flashcard => {...flashcard, [key] = flashcard.id}) which is now remarkably similar to the first example. – VLAZ Commented Aug 17, 2020 at 10:10
• 1 Thanks @VLAZ, that insight helped me understand this. I got your example to work which makes sense, but you have to surround the brackets with parentheses to indicate that the brackets are meant to create an object and are not function brackets: const frontFlashcards = flashcards.map(flashcard => ({...flashcard, key: flashcard.id})); – Edward Tanguay Commented Aug 17, 2020 at 10:46
• Yes, sorry - my bad there. You do indeed need () around it. It's a syntax quirk otherwise {} is interpreted as the body, not an object literal. – VLAZ Commented Aug 17, 2020 at 11:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

{...flashcard} - This basically spreads the properties in flashcard object on the props object that Flashcard ponent will receive.

This is not necessary if you don't want to pass all the properties of flashcard object as props to Flashcard ponent.

Think of this

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

as a shorter way of writing this:

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

Because props were meant to flow in single direction, which is from parent to child. And when you have a prop which is a reference value such as array or object. Any write operation to it will change the value in reference memory which will modify the prop from child ponent. Hence destructing it creates a new memory reference and saves it from getting modified

---

Because it is syntactical sugar. Otherwise you had to write out the properties like in your example e.g.

 {this.props.flashcards.map(flashcard =>
      <Flashcard back={flashcard.back} front={flashcard.front} key={flashcard.id} />
  )}

本文标签：