javascript: изменить один элемент массива и передать весь массив... в одной строке

Question

в react состояния вне конструктора задаются через использование функции setState:

setState({
    arr: [1, 2, 3]
});

Но мне надо изменить лишь один элемент в массиве

Как это корректнее сделать:

Через

this.state.arr[2] = 3;

получаю ворнинг:

Line 66:13:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Хотелось бы всё делать по правильному и покрасивее :)

Что современная наука может предложить?

let tmp = this.state.arr;
tmp[2] = 3;
setState({
    arr: tmp
});

как-то криво на мой взгляд, а просто отключить этот ворнинг как-то неправильно

Answer 1

Я так понял вы работаете с классовыми компонентами.

Как правильно предложил xydope можно использовать вариант с коллбэком.

this.setState(prevState => ({
    [prevState.arr[2]]: 3,
}));

Как альтернатива если у вас установлен Lodash можно использовать cloneDeep .

import head from "lodash/head";
import cloneDeep from "lodash/cloneDeep";
//..

const clonedStateArray = cloneDeep(this.state.arr);

head(clonedStateArray) = 3;

this.setState(prevState => ({ arr: clonedStateArray }));

Про мутирующие методы массивов я думаю вы в курсе, но все же оставлю тут ссылку может кто не знает.

БЛОГ НА HUSL

javascript: изменить один элемент массива и передать весь массив... в одной строке

Ответы (1 шт):