react prop传递给子组件只适用于本地主机后端

Question

我有点失去我的头脑，因为我不知道是什么问题或如何接近它。我在我的后端服务器(托管在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下传递给子组件。

return (
...
<Game socket={socket} setInLobby={setInLobby} roomPlayers={roomPlayers} room={myRoom} />
...
)

子组件内部:"Game"当我使用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变量不能作为道具传递，如果后端不是本地托管的。

如果你需要更多的信息，请告诉我。谢谢你

Answer 1

return (
...
{(!inLobby && myRoom) &&
<Game socket={socket} setInLobby={setInLobby} roomPlayers={roomPlayers} room={myRoom} />
}
...
)

哎呀，事实证明，当使用托管后端时添加的延迟对于将数据提取到前端来说太慢了。

添加

{(!inLobby && myRoom) &&
...
}

等待接收数据修复问题