Next.js Discord

Discord Forum

Weird Error Calling an unintended function while using onChange for an input field

Unanswered
Horned oak gall posted this in #help-forum
Open in Discord
Horned oak gallOP
Soooo this is a weird one and I'll try my best to explain it properly.... There was an initial syptom that led me to where I am now on it and we'll start there just incase I'm wrong on the real issue here.

Basically this is a chat page where users can talk to each other.

The issue is when submitting a message the page breaks with the following error:
"Cannot update component hot reload: bad setState"

However while trying to diagonose this I found out that my getMessages func is being nonstop spammed every time I render my <DisplayConversation> component
DisplayConversation.tsx

5 Replies

Horned oak gallOP
Here is the page itself and the other component involved in case either of them are the cause here
https://pastebin.com/z0WsxtuU -page.tsx
https://pastebin.com/2rx7fRFS -DisplayUserConversations.tsx (component that is also called on the page along w/ the DisplayConversation.tsx)
It's definitely an infinite loop firing off so I imagine I need useEffect() probably where the const func getMessages() is called but not sure on proper implementation of it or if there's a deeper issue than just that here
Horned oak gallOP
So I did find a working solution for this to add a useState as "isInitialPageLoad" that is true, then set to false the first time getMessages is called right before the get is actually fired but seems a little hacky?
const [isInitialPageLoad, setIsInitialPageLoad] = useState<boolean>(true);
const getMessages = async (identity1: number, identity2: number) => {
        try {
            setIsInitialPageLoad(false)
            let messagesData = await getConversationForIdentities(identity1, identity2, session?.user.backendToken)
            setMessages(messagesData)
            // scrollToBottom();
        } catch (error) {
            console.log("Get conversation for identities error: " + error)
        }
    }

    if (isInitialPageLoad) {
        getMessages(senderIdentityId, receiverIdentityId);
    }