реагировать на проблемы с горячей перезагрузкой

Question

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

Обратите внимание на журналы.

import ReactNotification from "react-notifications-component"

function App() {
  const notificationDOMRef = useRef(null)
  return (
                <>
                    <ReactNotification ref={notificationDOMRef} />
                    {
                        notificationDOMRef && 
                        <Notification notificationDOMRef={notificationDOMRef}>
                        ...
                        </Notification>
                    }
                </>
  )
}



export const NotificationContext = React.createContext();

function Notification({ notificationDOMRef, intl, children }) {
    const [actions, setActions] = useState(null)
    console.log("Notification");

    useEffect(() => {
        console.log("Effect");
        const pushNotification = (errorType) => notificationDOMRef.current.addNotification(errorType)
    }, [])

    return (
        <NotificationContext.Provider value={{actions}}>
            {children}
        </NotificationContext.Provider>
    )
}

Следующий сценарий происходит только во время работы среды разработки.Горячая перезагрузка включена.

Когда я запускаю среду разработки и выполняю успешный запрос, появляется зеленое поле, уведомляющее меня.В этом процессе печатается только одно ключевое слово Effect.

Теперь, если я изменю что-то в коде, например, изменив строку Effect на Eff и сохраню, приложение перезагружается, но когда я нажимаюКнопка Сохранить Я получаю сообщение об ошибке: Uncaught (in promise) TypeError: Cannot read property 'addNotification' of null в pushNotification.Если я пытаюсь отладить в Chrome, функция addNotification присутствует на context, но приложение видит ее как ноль.

Есть идеи?Я делаю что-то не так или это проблема с горячей перезагрузкой?

PS: useEffect необходим, потому что я устанавливаю только один раз (при инициализации) некоторые axios перехватчики.

PS2: если я отключаю горячее переопределение, страница полностью обновляется, и все работает нормально.Так что проблема только в режиме разработки.

  "devDependencies": {
    ...
    "react-hot-loader": "4.6.5",
    "webpack": "4.29.1",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14",
    "webpack-merge": "4.2.1"
  },
  "dependencies": {
    "axios": "0.18.0",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-intl": "2.8.0",
    "react-notifications-component": "1.1.1",
    "react-router-dom": "4.3.1"
  }

Answer 1

Я не нашел решения этой проблемы. Я оказался в ситуации, чтобы заменить, чтобы использовать другую библиотеку, которая не использует ref s.

Я пытался использовать разные хуки для инициализации, я пытался удалить все хуки и переместить реагирующие компоненты вместо функциональных, и результаты были одинаковыми.

В простых сценариях библиотека могла бы быть хорошей, но я закончил тем, что использовал реактив toastify, потому что мне нужно было создать мост между перехватчиками axios, реагировать на int, реагировать и поджаривать библиотеку.