Question

升级到React 16.8和React Native 0.59.8之后，在jsx map函数内使用传播运算符将不再起作用。

不再使用的旧工作代码：

this.orders.map(function (order, idx) {
   return <Row key={idx} {...order} />
});

行不再收到“订单”对象。

新的工作代码：

this.orders.map(function (order, idx) {
   return <Row key={idx} order={order} />
});

行收到“订单”。

我是否错过了一些基本知识（很可能是因为我已经待了几个小时了）还是有变化？

已更新：

this.state.orders.map(function (order, idx) {
                            return <Row key={idx} {...order} showModalOrderDetails={this.showModalOrderDetails} getOrders={this.getOrders} />
                        }.bind(this))

结果：

05-14 16：04：24.365 29691 29971 I ReactNativeJS：“子项中收到的道具：” ，{showModalOrderDetails：[功能：绑定proxiedMethod]，

05-14 16：04：24.365 29691 29971 I ReactNativeJS：getOrders：[函数：绑定proxiedMethod]}

05-14 16：04：24.467 29691 29971 E ReactNativeJS：TypeError：未定义不是对象（正在评估“ this.props.customer.firstname”）

而：

 this.state.orders.map(function (order, idx) {
                            return <Row key={idx} order={order} showModalOrderDetails={this.showModalOrderDetails} getOrders={this.getOrders} />
                        }.bind(this))

结果：

05-14 16：08：42.033 29691 29971 I ReactNativeJS：“子项中收到的道具：” ，{订单：

05-14 16：08：42.033 29691 29971 I ReactNativeJS：{id：2132，

05-14 16：08：42.033 29691 29971 I ReactNativeJS：customerOrderId：123，

05-14 16：08：42.033 29691 29971 I ReactNativeJS：franchiseId：41，

05-14 16：08：42.033 29691 29971 I ReactNativeJS：客户：

05-14 16：08：42.033 29691 29971 I ReactNativeJS： {名字：'erich'，

... 05-14 16：08：42.033 29691 29971 I ReactNativeJS：showModalOrderDetails：[功能：绑定proxiedMethod]，

05-14 16：08：42.033 29691 29971 I ReactNativeJS：getOrders：[函数：绑定proxiedMethod]}

已更新

如果执行以下操作，便可以解决：

this.state.orders.map(function (order, idx) {
                            let norder = {
                                ...order, 
                                showModalOrderDetails: this.showModalOrderDetails,
                                getOrders: this.getOrders
                            }
                            return <Row key={idx} {...norder}  />
                        }.bind(this))

有人可以解释吗？我以前从来没有这样做。

Answer 1

在这种情况下，通常将传播作为属性来向下传递一组对象键作为道具，而不是对象本身。例如，考虑以下对象：

const obj = {
  propA: 5,
  propB: 'hi'
}

如果您传播此内容：<MyComp {...obj}/>，则与这样做：<MyComp propA={obj.propA} propB={obj.propB}/>

因此，如果您要传播的对象包含密钥order（因此order.order有效），则传播将放置在组件上的订单道具。例如：

const order = {
  order: 'something'
}

<MyComp {...order}/> // this will pass a prop called order down

因此，如果您的原始代码在某个阶段起作用，我怀疑您的对象上有一个order键。您可以在这里了解更多信息：https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

Answer 2

这不是React问题，当您使用扩展运算符{...order}时，Row组件将收到order内部的属性，例如，如果order = { a: 1, b: 2, c: 3 }然后{{1 }}收到Row，a和b而不是c，但是您可以使用The destructuring assignment syntax来获取变量order内的属性，如下所示：

order

Answer 3

当前，您正在散布对象内部的元素。因此，例如，如果order看起来像{ id: 1, name: 'jon' }，则<Row />组件将以id和name作为道具，而不是整个订单对象。如果您执行以下操作，您将在行组件中收到订单道具。这与说order={order}相同，并且适用于任何数据类型。这也和说{ ...{ order: order }}一样-只是es6的简写。

尝试一下：

this.orders.map(function (order, idx) {
  return <Row key={idx} { ...{ order }} />
});

您还可以使用ES6进行简化

this.orders.map((order, idx) => <Row key={idx} { ...{ order }} />)

传播运算符不再在React Native地图功能中传递

3 个答案: