Question

我有以下两个React组件，一个是主App，另一个是使用react-notification-component的通知组件。我省略了一些我认为并不重要的代码。

请注意日志。

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中的1}}。如果我尝试在Chrome中调试，则pushNotification上存在addNotification函数，但应用程序将其视为空。

有什么想法吗？我是在做错什么，还是热装问题？

PS：context是必需的，因为我只设置了一次（初始化时）一些useEffect拦截器。

PS2：如果禁用热重载，则页面将完全刷新，并且一切正常。因此，问题仅在开发模式下。

axios

Answer 1

我没有找到解决此问题的方法。我发现自己处于这种情况，需要替换以使用另一个不使用ref的库。

我尝试了不同的钩子来处理初始化，我尝试移除所有的钩子并移动以响应组件而不是功能组件，结果是相同的。

在简单的情况下，该库可能不错，但是我最终使用了react toastify，因为我需要在axios拦截器，react intl，react和toast lib之间创建一个brigde。

使用ref反应热装问题

1 个答案: