时间戳

首页 > 解决方案 > 有没有办法通过查找 Item 来更新状态并替换嵌套状态？

reactjs - 有没有办法通过查找 Item 来更新状态并替换嵌套状态？

问题描述

我正在组件状态下构建我的模块的订单功能，因此状态对象看起来像这样

 "activity": {
            "name": "rewwerwer",
            "description": "werwerwerwerwer",
            "modules": [
                {
                    "name": "Text",
                    "order": 1,
                    "module_id": 1612,
                },
                {
                    "name": "Text2",
                    "order" 2,
                    "module_id": 1592,
                }
            ]
        }



handleSortUp = (moduleid ,newOrder) => {
        const { modules } = this.state.activity;
        const module = modules.find(element => element.module_id === moduleid);//Thios returns the correct object 

         this.setState({ activity: { ...this.state.activity.modules.find(element => element.module_id === moduleid), order: newOrder } });
}

我试过了，但它更新了订单字段和对象，但也从模块数组中删除了所有其他对象：<

我只想用模块ID替换每个模块上的订单字段并将其余数据留在那里

handleSortUp(1612,14) 时我需要的状态的所需响应；被解雇

        handleSortUp(1612,2);


        {
            "name": "rewwerwer",
            "description": "werwerwerwerwer",
            "modules": [
                {
                    "name": "Text",
                    "order": 2,
                    "module_id": 1612,
                },
                {
                    "name": "Text2",
                    "order": 1,
                    "module_id": 1592,

                }
            ]
        }

我可以在一个简单的数组上做到这一点，问题是如何在反应时更新状态
另外一种更改订单的方法也得到了很好的回答，但是如何更改已注册该订单的字段所以当我们触发更改项目 1 订单时2 项目 2 需要接受订单 1

谢谢

标签： reactjsecmascript-6state

解决方案

当然！这将是使用可用于数组的内置 .map 方法的好地方。考虑以下示例。

let array = [{order: 1, type: "food"}, {order: 2, type: "notfood"} ]

const newArray = array.map((item) => {
   //CHECK TO SEE IF THIS IS THE ITEM WE WANT TO UPDATE
    if(item.order == 1){
        return {
            ...item,
            newField: "newData"
        }
    } else {
        return item
    }
})

输出是：

[{order: 1, type: "food", newField: "newData"}
{order: 2, type: "notfood"}]

所以是的，您可以完全更新您正在寻找的模块，而无需改变阵列的其余部分。然后使用您的发现使用一些好的 ol spread 来更新组件状态。

this.setState({
    activity: {
        ...this.state.activity,
        modules: newArray}
})

推荐阅读