javascript - Spread 运算符不再传入 React Native map 函数

Question

升级到 React 16.8 和 React Native 0.59.8 后，在 jsx 映射函数中使用展开运算符不再有效。

旧的不再工作的代码:

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

Row 不再接收“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: 'Props received in child:', { showModalOrderDetails: [Function: bound proxiedMethod],

05-14 16:04:24.365 29691 29971 I ReactNativeJS: getOrders: [功能:绑定(bind) proxiedMethod]

05-14 16:04:24.467 29691 29971 E ReactNativeJS: TypeError: undefined is not an object (evaluating '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: 'Props received in child:', { order:

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: { firstname: 'erich',

...05-14 16:08:42.033 29691 29971 I ReactNativeJS: showModalOrderDetails: [功能: 绑定(bind) proxiedMethod],

05-14 16:08:42.033 29691 29971 I ReactNativeJS: getOrders: [功能:绑定(bind) 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

在这种情况下，传播作为属性通常是为了将一组对象键作为 Prop 传递下去，而不是对象本身。例如，考虑这个对象:

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

如果你传播这个:<MyComp {...obj}/> ，这与做的是一样的:<MyComp propA={obj.propA} propB={obj.propB}/>

因此，如果您传播的对象包含一个键 order (所以 order.order 是有效的)，然后传播将在组件上放置一个 order prop。例如:

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