Question

问题

大家好，我正在尝试创建一个实时消息传递应用程序。我使用 useState 和 useEffect 来跟踪我希望组件何时重新渲染。但是，我遇到的问题是 useEffect 中的无限循环。我想知道是否有人可以在不使用 useEffect 内部的 setState 的情况下，将我推向正确的方向来解决这个问题，这样我就可以避免无限循环。

我尝试过的东西

useRef 但意识到它不会触发依赖数组中的重新渲染
此问题的解决方案：Can I set state inside a useEffect hook

客户代码

// Keeps track of whether message was successfully sent
const [isMessageSent, setIsMessageSent] = useState({
    status: "failure",
    render: false
});

useEffect(() => {    
    // Connecting to our endpoint and creating an event
    socket = io(ENDPOINT, connectionOptions);

    // If message has been successfully sent...
    if (isMessageSent.status === "success") {
        socket.emit("messageToServer", isMessageSent);
    }

    // Now that the server has acknowledged message has beent sent
    // we will set it back to false and reredner everything
    socket.on("messageFromServer", ({ status, render }) => {
        // Triggering a re-render since message was successful
        setIsMessageSent({ ...isMessageSent, status, render });
        // Setting it back to default in the event of a new message
        setIsMessageSent({ ...isMessageSent, status: "failure", render: false });
    });
}, [history, ENDPOINT, isMessageSent]);

服务器代码

// Socket.io related code
io.on("connection", (socket) => {
    socket.on("messageToServer", (isMessageSent) => {
        // That means message was successfully sent, set it back to false
        if (isMessageSent.status === "success") {
            io.emit("messageFromServer", { ...isMessageSent, render: true });
        }
    });
});

如何避免在 useEffect 中使用 setState 的无限循环？

0 个答案: