#reactjs #snowpack #react-refresh
#reactjs #снежный покров #реагировать-обновить
Вопрос:
Я использую React со Snowpack и плагин react-refresh.
После изменения сервер разработки snowpack перекомпилируется правильно, и браузер получает сигнал обновления HMR — но содержимое не перезагружается, изменения видны только после ручной перезагрузки страницы.
Я тестировал с Firefox, Chrome и Brave.
Согласно документации, вам не нужно настраивать ничего, кроме включения плагина.
У кого-нибудь есть идея? Был бы очень благодарен!
Ответ №1:
Является ли ваше управление состоянием mobx?
Если используется mobx, компонент оптимизирован для памяти наблюдателем, поэтому для рендеринга необходимо обновить управление состоянием mobx.
Другими словами, observer() должен быть применен React.memo, и он снова отображается только при изменении состояния.
Так что, если вы используете useObserver(() => {}) , это будет работать
Комментарии:
1. Бинго, я действительно использовал mobx! Ваше объяснение звучит убедительно, я думаю, в этом и была проблема. С тех пор я переключился со Snowpack на Create React App, поэтому я не могу проверить это окончательно — в любом случае, спасибо, может быть, это поможет другим!
2. На самом деле, я изменил код во время выполнения, но возникла проблема, которая не изменилась, поэтому я нашел и подтвердил, что она решена.
3. @KimKwangHoon Если я попытаюсь использовать
useObserver, это выдаст мне следующую ошибку: Неперехваченная ошибка: недопустимый вызов перехвата. Хуки могут вызываться только внутри тела функционального компонента. То, что я делаю, это:export const HomePage = useObserver(() => { //body })4. @новичок ммм… Недопустимое использование useObserver. Вам нужно написать useObserver в return, а не часть, которая должна быть назначена. « импортировать { useObserver, useLocalStore } из ‘mobx-react’ // 6.x или mobx-react-lite@1.4.0 функция Person() { const person = useLocalStore(() => ({ имя: ‘John’ })) возвращает useObserver(() => ( <div> {person.name} <кнопка onClick={() => (person.name = ‘Майк’)}>Нет! Я Майк </button> </ div> )) } «