我有點失去理智，因為我不知道問題是什么或如何解決它。我的后端服務器（托管在heroku上）和本地目錄中有相同的檔案，前端也是如此
const SOCKET_SERVER_URL = 'https://backendserverurl.com';
// const SOCKET_SERVER_URL = 'http://localhost:5000';
我正在嘗試通過偵聽套接字事件偵聽器來設定 useState
（本地后端服務器和 heroku 服務器都從套接字偵聽器“currentRoom”接收資料）
const [myRoom, setMyRoom] = useState(null)
...
...
...
socket.on("currentRoom", (args) => {
setMyRoom(args)
console.log("logging inside lobby ")
console.log(args)
});
并將其傳遞給回傳的子組件。
return (
...
<Game socket={socket} setInLobby={setInLobby} roomPlayers={roomPlayers} room={myRoom} />
...
)
在子組件內部：當我使用 localhost 作為后端時，“游戲”能夠接收房間道具，但當我使用托管后端作為 SOCKET_SERVER_URL 時沒有資料傳遞。
const Game = ({ socket = null, setInLobby = null, roomPlayers = null, room = null }) => {
...
...
// logs the room if the backend is localhost but is null when backend is hosted online
console.log(room)
...
...
)}
我會理解前端是否存在問題，但如果后端不是本地托管的，我不確定為什么 useState 變數無法作為道具傳遞。
如果您需要更多資訊，請告訴我。謝謝
uj5u.com熱心網友回復：
return (
...
{(!inLobby && myRoom) &&
<Game socket={socket} setInLobby={setInLobby} roomPlayers={roomPlayers} room={myRoom} />
}
...
)
糟糕，事實證明，使用托管后端時添加的延遲太慢，無法將資料提取到前端。
添加
{(!inLobby && myRoom) &&
...
}
等待接收資料解決了問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/484130.html
標籤：节点.js 反应 heroku 套接字.io 下一个.js