为什么在React中使用.map（）而不是在普通JavaScript中使用时需要spread运算符？

在React应用程序中，我将此对象数组传递给组件：

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

在组件中，当我在阵列中映射时，为什么我需要一个排列操作符才能将单个项目从阵列发送到下一个较低的组件（闪存卡），例如：

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

---

因为它是句法上的糖。否则，您必须写出示例中的属性

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

{this.props.flashcards.map（flashcard=>
)}

因为

道具是单向流动的，从父母到孩子。当您有一个作为参考值的道具时，例如
数组
或
对象
。对其进行任何写入操作都将更改
参考
内存中的值，该值将修改来自子组件的道具。因此，
销毁
会创建一个新的内存引用，并将其保存，以防被修改

{…flashcard}
-这基本上是在
flashcard
组件将接收的
道具上的
flashcard
对象中传播属性

如果您不想将
flashcard
对象的所有属性作为道具传递给
flashcard
组件，则不需要这样做

想想这个

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



作为一种简短的写作方式：

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


flashcards.map（flashcard=>console.log（flashcard.front））与上述操作完全不同。首先，这是一个有趣的错误：
.map（）
是，所以使用简单的日志不是
.map
的目的。这也是问题的症结所在——JS中正确的映射应该是
flashcards.map（flashcard=>{…flashcard，[key]=flashcard.id}）
，这与第一个示例非常相似。感谢@VLAZ，这一洞察力帮助我理解了这一点。我让您的示例发挥作用，这很有意义，但您必须用括号括住括号，以表明括号用于创建对象，而不是函数括号：
const frontFlashcards=flashcards.map（flashcard=>（{…flashcard，key:flashcard.id}）是的，对不起-我的错在那里。您确实需要
（）
围绕它。这是一个语法怪癖，否则
{}
会被解释为主体，而不是对象文字。好吧，我想我的困惑是我来自Vue.js来做出反应，我只是假设一个人可以像我在Vue.js中习惯的那样传递整个flashcard对象，例如
或
@click=“flipFlashcard（flashcard）”
。这在React/JSX中不可能吗？您可以传递整个
flashcard
对象-->
<代码>道具
对象现在将有一个名为
flashcard
的属性，其值将是这个
flashcard
对象。
{…flashcard}
和
flashcard={flashcard}
之间的区别在于前者将在
props
对象上添加
flashcard
对象的每个属性，而
flashcard={flashcard}
将在
props
对象上添加
flashcard
属性，但是我的Flashcard.js组件正在接收一个Flashcard对象，例如
const Flashcard=（Flashcard）=>（
如果我真的发送了很多参数，为什么不单独接收每个参数，例如
const Flashcard=（前面、后面、id）=>（
？@EdwardTanguay如果您将道具作为
传递给
Flashcard
组件，那么您必须从
道具
对象-->
const Flashcard=（{front，back，id}）=>（
如果将整个
flashcard
对象作为
传递，则需要从
props
对象-->
const flashcard=（{flashcard}）=>（
.Component不直接接收道具，而是将每个道具作为
props
对象的属性传递给组件。
<Flashcard
   key={flashcard.id}
   back={flashcard.back}
   front={flashcard.front}
   id={flashcard.id}
/>