Warning при передаче MobX отслеживаемого массива — какое решение адекватнее?

Question

[Destell]

Приложение
Есть компонент с редактированием данных в карточке. При добавлении новых полей телефона возникает ошибка

[mobx.array]
Attempt to read an array index(2) that is out of bounds (2).
Please check length first. Out of bound indices will not be tracked by MobX

Получив эту ошибку, поправил передачу данных из стора в компонент таким образом

return (
                <>
                    {items.map(item => (
                        <Card
                            key={item.id}
                            id={item.id}
                            item={{
                                ...item,
                                phoneValues: item.phoneValues.slice()
                            }}
                        />
                    ))}
                </>
            );

Однако, мне кажется, это решение не очень хорошее из-за указания конкретного имени (phoneValues). Есть смысл добавить перебор свойств объекта с проверкой на isArray вместо указания имени конкретного свойства, содержащего массив?

Comments

[Антон Спирин]

Выглядит как нелепый костыль, который даже ошибку не исправляет. Просто подменяете mobx.array на Array и предупреждение библиотеки пропадает.

Answer 1

[Destell]

Запоздалый ответ на свой же вопрос - надо было использовать нативный mobx toJS, а не slice из рекомендованных решений оттуда же.

Comments

[Alex_Nzr]

Выложить правильное решение проблемы никогда не поздно) Спасибо

Answer 2

[0xD34F]

мне кажется, это решение не очень хорошее из-за указания конкретного имени (phoneValues)

Выглядит не "не очень хорошим", а просто отвратительным - типа, не буду я разбираться с потенциальным багом, а вместо этого соответствующее предупреждение просто замету под ковёр. Ну, сделали вы slice - от этого в компоненте Card обращение к несуществующим элементам phoneValues никуда не делось.

Comments

[Destell]

Отредактировал вопрос более развернуто.
Решение со slice я нашел в документации MobX

This means that regularly libraries are not able to recognize observable arrays as normal arrays. This can simply be fixed by passing calling observable.toJS() or observable.slice() before passing the array to another library.

[0xD34F]

Destell, и чего вы от меня ждёте теперь? Ну, открыл добавленную вами ссылку - дальше что? Зачем мне смотреть на эти карточки?

"Решение со slice" - никакое это не решение, а купирование симптомов проблемы. Вы вообще поняли, о чём идёт речь в предупреждении?

[Destell]

0xD34F, код обращается к элементам массива с индексами, выходящими за его длину, т.е., не существующими по мнению MobX. Элементы добавляются в массив через метод react final form array и выбивают warning, потому что получали не обычный массив, а proxy.

[0xD34F]

Destell, вот и ищите, где у вас такое происходит, и исправляйте.

UPD.

Элементы добавляются в массив через метод react final form array и выбивают warning, потому что получали не обычный массив, а proxy.

Я не знаю, что такое "метод react final form array". Предлагаете догадаться? Нет, так не будет. Воспроизведите свою проблему в песочнице, посмотрю, что можно сделать.