javascript - Network Status Detect In Reactjs - Stack Overflow

admin管理员组

文章数量:1356321

i am new in Reactjs my problem is that i have to detect the network status if wifi or internet connection is connected or disconnected

i tried using the below code but it wont detect network status correctly it always return false value

please help me

and here is my code and 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;

i am new in Reactjs my problem is that i have to detect the network status if wifi or internet connection is connected or disconnected

i tried using the below code but it wont detect network status correctly it always return false value

please help me

and here is my code and 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;

• javascript
• reactjs

Share Improve this question Follow edited Jul 18, 2020 at 18:51 qjuanp 2,82611 gold badge1818 silver badges1818 bronze badges asked Jul 17, 2020 at 11:05 HenryHenry 4311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to use the same function reference for the event listener else it won't clean up on unmount/effect cleanup.

Here's a sample code for this

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";
};

Look how we're not using an arrow function here. We can either create the function inside the useEffect or a function returned by useCallback.

https://codesandbox.io/s/restless-cache-50wg5?file=/src/App.js

There is an online and an offline event from the window object. You should be able to attach two listeners to the window like so:

useEffect(() => {
  window.addEventListener('online', () => setStatus(true))
  window.addEventListener('offline', () => setStatus(false))
}, [])

本文标签： javascriptNetwork Status Detect In ReactjsStack Overflow