传递给子组件的反应道具仅适用于本地主机后端

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} />
    ...
)

在子组件内部：当我使用 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 变量不能作为 prop 传递。

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

Answer 1

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

糟糕，使用托管后端时添加的延迟太慢，无法将数据提取到前端。

添加

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

等待接收数据解决了问题

传递给子组件的反应道具仅适用于本地主机后端

react prop passing to child component only works with localhost backend

node.js

reactjs

heroku

socket.io

next.js