Есть ли способ обновить состояние путем поиска элемента и замены на вложенное состояние?

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 } });
}

Я пробовал это, но он обновляет поле заказа и объект, но также удаляет все остальныеобъекты из массива модулей: <</p>

Мне нравится просто заменять только поле порядка в каждом модуле идентификатором модуля и оставлять там остальные данные

требуемый ответ из состояния, которое мне нужно, когда 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

Спасибо

Answer 1

Конечно, они все уничтожены.Обратите внимание на то, что вы написали здесь:

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 } });
}

Это должно сработать, дайте мне знать, но я настоятельно советую спросить меня или поискать навеб, если вы не понимаете, что там происходит (синтаксически или семантически говоря).

Answer 2

Конечно!Это было бы отличным местом для использования встроенного метода .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"}]

Так что да, вы можете полностью обновить модуль, который ищете, не изменяя остальную часть массива.Затем используйте полученные данные, чтобы обновить состояние компонента с помощью хорошего старого спреда.

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