Question

我正在响应时在组件状态下构建模块的订购功能所以状态对象看起来像

 "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上更新State
同样，更改订单的一种方法也很好，但是如何更改已注册该订单的字段因此，当我们将商品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传播来更新组件状态。

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 它返回一个索引，为什么要在状态中插入索引？

答案部分来自yourfavoritedev。正如他所说，您可以使用内置的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 } });
}

这应该行得通，让我知道，但是我强烈建议您问我一下或者在网上搜索（如果您不了解那里正在发生什么（从语法或语义上来说）。）

有什么方法可以通过查找项更新状态并在嵌套状态下进行替换吗？

2 个答案: