Обновление массива в объекте

@Викуся96 · Регистрация: 28.08.2019

Студворк — интернет-сервис помощи студентам

Привет всем!
Как улучшить механизм обновления массива в ReactJS.
Из-за этой конструкции у меня бывают баги с обновлением других данных.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const [data, setData] = useState([
    { description: 'test', dataParam: ['z!SGk$', 'v#76f!'] },
    { description: 'test', dataParam: ['#8!24x', 'H!8#5n'] },
    { description: 'test', dataParam: ['3%b8QJ', '64tbpP'] },
]);
 
const [oldData, setOldData] = useState(['#8!24x', 'H!8#5n']);
 
changeLocalData(['$b62qG', '529y6U']); // передача параметров происходит по событию. (Входные данные)
 
function changeLocalData(arrNewData) {
    let tempData = data;
 
    for (let i = 0; i < tempData.length; i++) {
        if (tempData[i].dataParam[0] === oldData[0] && tempData[i].dataParam[1] === oldData[1]) {
            tempData[i].dataParam = arrNewData;
            break;
        }
    }
    setData(tempData);
}

Я пыталась так сделать...

JavaScript
1
2
3
4
5
6
7
8
9
10
    for (let i = 0; i < tempData.length; i++) {
        if (tempData[i].dataParam[0] === oldData[0] && tempData[i].dataParam[1] === oldData[1]) {
            /* Пример 1 */
            tempData[i].length = arrNewData;
            setData(tempData);
            /* Пример 2 */
             setData({...tempData[i].dataParam, arrNewData});
            break;
        }
    }

Но у меня не получилось сделать адекватно эту функцию.
Спасибо заранее!

krvsa · 19.01.2023, 19:22

Сообщение от Викуся96

JavaScript
1
let tempData = data;

Какой сакраментальный смысл в этом действии?

Добавлено через 3 минуты

Сообщение от Викуся96

JavaScript
1
setData({...tempData[i].dataParam, arrNewData});

Делать в цикле такие вызовы совсем не имеет смысла. Т.к. изменение стейта суть асинхронное действо. Т.о., при явном указании значении стейта, стейту просто присвоится последнее изменение.

P.S.
И опять этот tempData...

Добавлено через 2 минуты

Сообщение от Викуся96

Но у меня не получилось сделать адекватно эту функцию.

Тебе нужно в итоге создать новый массив и вот его нужно записать в стейт.

Добавлено через 9 минут
Что-то типа такого...

JavaScript
1
2
3
4
5
6
function changeLocalData(arr) {
    const a = data.map(o => {
        return o.every((v, j) => v === oldData[j]) ? {...o, dataParam: arr} : o
    });
    setData(a);
}

@Викуся96 · 20.01.2023, 10:43 **[ТС]**

Сработал такой вариант

. Только как сделать для вложенного массива?
Логика работы такая, но данные выглядят следующим образом:

JavaScript
1
2
3
4
5
6
7
8
9
const [data2, setData2] = useState([
    { description: 'test', dataParam: [ ['z!SGk$', 'v#76f!'],  ['Jd^3l1', 'lc#ew1'], ...] },
    { description: 'test', dataParam: [ ['#8!24x', 'H!8#5n'], ['3%b8QJ', '64tbpP'] ] },
    ...,
]);
 
const [oldData, setOldData] = useState(['#8!24x', 'H!8#5n']);
 
changeLocalData(['$b62qG', '529y6U']); // передача параметров происходит по событию. (Входные данные)

Я попробовала через вложенный map но данные вставляются не правильно

(((

krvsa · 20.01.2023, 11:25

Викуся96, вот такой тестик я сваял...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
const [data2, setData2] = useState([
    { description: 'test', dataParam: [ ['z!SGk$', 'v#76f!'],  ['Jd^3l1', 'lc#ew1'] ] },
    { description: 'test', dataParam: [ ['#8!24x', 'H!8#5n'], ['3%b8QJ', '64tbpP'] ] }
]);
 
const [oldData, setOldData] = useState(['#8!24x', 'H!8#5n']);
*/
 
const data2 = [
    { description: 'test', dataParam: [ ['z!SGk$', 'v#76f!'],  ['Jd^3l1', 'lc#ew1'] ] },
    { description: 'test', dataParam: [ ['#8!24x', 'H!8#5n'], ['3%b8QJ', '64tbpP'] ] }
];
 
const oldData = ['#8!24x', 'H!8#5n'];
 
 
changeLocalData(['$b62qG', '529y6U']);
 
//
function changeLocalData(arr) {
    const an = data2.map(o => {
        const i = o.dataParam.findIndex(a => a.every((v, i) => v === oldData[i]))
        if (i === -1) return o
        return {...o, dataParam: o.dataParam.map((a, j) => j === i ? arr : a)}
    })
    console.log(an)
    // setData2(an)
    return an
}

Суть его такая - тебе нужно сделать новые ссылки на все меняющиеся массивы и объекты.
Я закомментировал "стейтовую часть", дабы можно было пример просто запустить и посмотреть как оно заменилось...

Добавлено через 11 минут
Вот так будет без "внутреннего" map...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
//
function changeLocalData(arr) {
    const an = data2.map(o => {
        const i = o.dataParam.findIndex(a => a.every((v, i) => v === oldData[i]))
        if (i === -1) return o
        const a = [...o.dataParam]
        a.splice(i, 1, arr)
        return {...o, dataParam: a}
    })
    console.log(an)
    // setData2(an)
    return an
}

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Обновление массива в объекте

Решение

Решение