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

вопрос создан в Thu, May 2, 2019 12:00 AM

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

Пожалуйста, обратите внимание на журналы.

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"
  }
    
0
1 ответ                              1                         

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

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

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

    
0
2019-05-03 11: 19: 19Z
источник размещен Вот