當我嘗試控制臺記錄來自套接字的訊息時，連接已建立并且一切正常。
import { useState, useEffect } from 'react'
import io from 'socket.io-client'
const App = () => {
const socketio = io('http://localhost:5000')
const [time, setTime] = useState("")
useEffect(() => {
socketio.on('message', msg => {
console.log(msg.time)
})
}, [])
return (
<div className="app">
{time}
</div>
)
}
當我嘗試做setTime(msg.time)而不是console.log(msg.time)發送數百個請求時，我的瀏覽器崩潰了。
import { useState, useEffect } from 'react'
import io from 'socket.io-client'
const App = () => {
const socketio = io('http://localhost:5000')
const [time, setTime] = useState("")
useEffect(() => {
socketio.on('message', msg => {
setTime(msg.time)
})
}, [])
return (
<div className="app">
{time}
</div>
)
}
為什么會發生這種情況，我該如何解決？
uj5u.com熱心網友回復：
io有副作用。每次呼叫它時都會創建一個連接。因為你在渲染階段呼叫它，所以每次組件狀態更新時，都會建立一個新的連接。
防止這種情況的最簡單方法是記住它。
const socketio = React.useMemo(() => io('http://localhost:5000'), [])
或將其移動到組件狀態的一部分，并連接到useEffect.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412533.html
標籤：