我有一个呈现订单列表的 ReactJS 组件。 我从 REST API 获得订单。数据格式如下:
{
"count": 2,
"orders": [
{
"order_number": 55981,
"customer_number": 24742
},
{
"order_number": 55980,
"customer_number": 24055
}
]
}
每个订单都可以有一个项目列表。当我点击一个订单时,我会得到以下格式的商品列表:
{
"count": 2,
"items": [
{
"name": "Green pillow",
"status": "pending"
},
{
"name": "Red pillow",
"status": "delivered"
}
]
}
订单列表会自动刷新并且可以随时更改,因此我将订单列表存储在 this.state
中,它通过 ajax 进行更新。
this.state
看起来像这样:
{
"orders": [
{
"order_number": 55981,
"customer_number": 24742
},
{
"order_number": 55980,
"customer_number": 24055
}
]
}
我的问题是,当我点击一个订单时,状态会得到更新,以便点击的订单包含与该订单关联的项目。单击一个项目后,订单列表将如下所示:
{
"count": 2,
"orders": [
{
"order_number": 55981,
"customer_number": 24742,
"items": [
{
"name": "Green pillow",
"status": "pending"
}
]
},
{
"order_number": 55980,
"customer_number": 24055
}
]
}
如何使用 this.setState() 将项目添加到特定订单?问题是 setState 似乎使用键更新数据,但我的订单是在一个数组中。我可能可以复制整个数组并将项目键放入其中,但这似乎有点过分了。 我是不是采取了错误的方法?
最佳答案
我不完全确定我是否收到了您的问题,但我认为您想要实现的是向位于您所在州的数组(推送)添加新订单。
如果是这样的话,你应该是这样的:
// since you're orders it's not a plain array, you will have
// to deep clone it (e.g. with lodash)
let orders = _.clone(this.state.orders);
orders.push(newOrder);
this.setState(orders);
为什么在更改状态之前克隆状态很重要?
不可变性带有一些很棒的特性(比如简单的相等比较),React 团队正朝着这个方向努力,以越来越多地提高性能。
从 React 0.13 开始,在不调用 this.setState
的情况下改变 state
将触发警告,并且它将在 React future 的某个时刻完全中断(参见 the docs )
希望对你有帮助
关于javascript - 更新 ReactJS 状态数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33132517/