javascript - React.js中的网络状态检测

我是Reactjs的新手，我的问题是，如果连接或断开了wifi或Internet连接，我必须检测网络状态
我尝试使用下面的代码，但无法正确检测网络状态，它始终返回false值
请帮我
这是我的代码和codesandbox.io

import React, { useEffect, useState } from 'react';

function App() {
  const [status, setStatus] = useState(null)

  useEffect(() => {
    window.addEventListener('online', () => setStatus(navigator.onLine))
    return () => window.removeEventListener('online', () => setStatus(navigator.onLine))
  })

  return (
    <div>
      <h2>Network Status Detector</h2>
      {status ? <div style={{ top: 50, position: "absolute" }}>Network Connected</div> : <div style={{ top: 50, position: "absolute"}}>Network Disconnected</div>}
    </div>
  )
}

export default App;

最佳答案

您需要为事件侦听器使用相同的函数引用，否则在卸载/效果清除时将无法清除该函数引用。
这是一个示例代码

export default function App() {
  return <NetworkStatus />;
}
const NetworkStatus = () => {
  const [status, setStatus] = useState(true);

  useEffect(() => {
    function changeStatus() {
      setStatus(navigator.onLine);
    }
    window.addEventListener("online", changeStatus);
    window.addEventListener("offline", changeStatus);
    return () => {
      window.removeEventListener("online", changeStatus);
      window.removeEventListener("offline", changeStatus);
    };
  }, []);

  return status ? "Online" : "Offline";
};

看看这里我们如何不使用箭头功能。我们可以在useEffect内创建函数，也可以在useCallback返回的函数中创建函数。
https://codesandbox.io/s/restless-cache-50wg5?file=/src/App.js