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

Question

我正在组件状态下构建我的模块的订单功能 on react 所以状态对象看起来像这样

 "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,

                }
            ]
        }

我可以在一个简单的数组上做到这一点，问题是如何在 react 上更新状态
更改订单的一种方法也得到了很好的回答，但是如何更改已注册该订单的字段 因此，当我们将第 1 项订单更改为 2 时，第 2 项需要接受订单 1

谢谢

Answer 1

当然！这将是使用可用于数组的内置 .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}
})

Answer 2

当然，他们都被淘汰了。注意你在这里写的：

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

你对那个发现做了什么？让我们看看 Array.prototype.find() 返回什么：https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/find 它返回一个索引，为什么要在状态中插入一个索引？

部分答案来自你最喜欢的开发者。 正如他所说，您可以使用内置的 Array.prototype.map() 并这样做：

handleSortUp = (moduleid ,newOrder) => {
  const { modules } = this.state.activity;
  const newModules = modules.map(module => module.module_id === moduleid ? { ...module, order: newOrder } : module)
  this.setState({ activity: { ...this.state.activity, modules: newModules } });
}

这应该可行，请告诉我，但如果您不了解那里发生的事情（从语法或语义上讲），我强烈建议您问我或在网上搜索。