websocket React useContext在useeffect中未定义

xdyibdwo 于 2023-10-20 发布在 React

关注(0)|答案(2)|浏览(104)

我正在编写一个带有Django channels和react的聊天应用。我想当一个新的消息被发送时，有一个当前用户的className。
我已经在上下文中有了当前用户，所以我只需要调用它并获取它。但是当我尝试在useEffect中获取用户时，它返回{}。

const {currentUser} = useContext(AuthContext)
useEffect(()=> {
        chatSocket.onmessage = function(e) {
            console.log(currentUser)
            const data = JSON.parse(e.data);
            setMessages(old => [...old, <p ref={oneRef} className={currentUser[0]?.username}>{data.message}</p>])
        };  
    },[])

我也需要useEffect，所以我不能只是删除它。我不想每次发送新消息时都调用axios调用。currentUser是一个对象。

websocket

来源：https://stackoverflow.com/questions/77215824/react-usecontext-is-undefined-in-useeffect

2条答案

按热度按时间

93ze6v8z1#

但是当我尝试在useEffect中获取用户时，它返回undefined。
你是不是忘了把currentUser包含在 *dependecy数组 * 中？

const { currentUser } = useContext(AuthContext);
const ref = useRef(false);

useEffect(()=> {
    if (!ref.current) return;

    if (currentUser) {
       ref.current = true;

       chatSocket.onmessage = function(e) {
          console.log(currentUser)
          const data = JSON.parse(e.data);
          setMessages(old => [...old, <p ref={oneRef} className={currentUser[0]?.username}>{data.message}</p>])
       };  
    }
}, [currentUser])

赞(0）回复(0）举报 2023-10-20

7gcisfzg2#

正如kinduser所说，我只是添加了currentUser作为依赖关系。因为消息是重复的，我用清理函数解决了它。现在代码看起来像这样。

useEffect(()=> {
        let ran = true;
        chatSocket.onmessage = function(e) {
            if (ran == true) {
                console.log(checker) 
                const data = JSON.parse(e.data);
                setMessages(old => [...old, <p ref={oneRef} className={currentUser[0]?.username}>{data.message}</p>])
                setChecker(false)
            }
        }

        return () => {
            ran = false;
        };
        
        
    },[currentUser])

赞(0）回复(0）举报 2023-10-20

我来回答

websocket React useContext在useeffect中未定义

2条答案

相关问题

热门标签

最新问答