Компонент React Hook не обновляется при изменении импортированного массива

Question

У меня есть некоторые поддельные данные в файле usersList.js. Также я создал сервис для добавления пользователей в этот массив. Но компонент, который отвечает за рендеринг этих данных, рендерится только один раз. Любые изменения, произошедшие в usersList, не влияют на повторную визуализацию.

Я пытаюсь использовать useEffect, но это не помогло. Только принудительное обновление может перерисовать его, но я не удовлетворен этим решением.

userList.js

const usersList = [{...}]

export default usersList

Answer 1

Любые изменения в usersList не влияют на повторную визуализацию.

Это потому, что если вы используете usersList в качестве состояния реакции и изменяете usersList, вы нарушаете одно из фундаментальных правил реакции . Вы не можете напрямую изменять состояние массивов / объектов.

Вместо этого вы заменяете массив / объект в состоянии через функцию установки, которую возвращает useState (или в компоненте класса, через setState).

Если все это происходит вне компонента, вам нужно что-то уведомить компонент о том, что что-то изменилось, чтобы компонент мог обновить свое состояние. Это может быть использование context или что-то еще, но по сути компонент должен знать, что ему нужно обновить свое состояние.