Question

我正在 React 中构建一个聊天应用程序。现在我遇到的问题是，当我单击一个按钮时，handleMsgSend 按钮会运行，并将“newMsg”事件分派给另一个客户端。收到此事件后，我希望 msgArr 状态更新为新收到的 msg，但没有。所有的一切都是新的味精，没有别的。为什么会这样？我觉得我在学习 React 时跳过了技术性的东西。

export default function Chat (props) {
    const uuid = props.uuid;
    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [activeStatus, setActiveStatus] = useState('Offline');
    const [unreadMsgs, setUnreadMsgs] = useState(0);
    const [msgArr, setMsgArr] = useState([]);
    const chatBtnRef = useRef();
    const chatBoxRef = useRef();
    const msgInputRef = useRef();
    useEffect(() => {
        socket.emit('join', uuid);
        socket.emit('isOnline', uuid);
        socket.on('newMsg', msg => {
            setMsgArr([ ...msgArr, { type: 'received', msg }]);
            console.log(msgArr);
            if(!open) setUnreadMsgs(unreadMsgs + 1);
            chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
        });
        socket.on('isOnline', () => {
            setActiveStatus('Online');
            socket.emit('isOnline');
        });
        return () => {
            console.log('removed');
            socket.off('newMsg');
            socket.off('Online');
        }
    }, []);

    const handleMsgSend = e => {
        e.preventDefault();
        let msg = msgInputRef.current.value;
        setMsgArr([ ...msgArr, { type: 'sent', msg }]);
        e.currentTarget.reset();
        socket.emit('newMsg', {uuid,  msg});
        chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
    }
    const toggleChat = () => {
        setUnreadMsgs(0);
        if(open) setOpen(false);
        else setOpen(true);
    }

我如何呈现 msgArr：

                <div ref={ chatBoxRef } className={ classes.chatBox }>
                    {
                        msgArr.map((msgObj, index) => {
                            return (
                                <div key={index} className={`msg-container ${(msgObj.type == 'sent')? 'myMsg' : 'hisMsg'}`}>
                                    <span className='msg'>
                                        { msgObj.msg }
                                    </span>
                                </div>
                            )
                        })
                    }                     
                </div>

Answer 1

您的套接字侦听器附加在仅在初始渲染时执行的 useEffect 内，因此您在其中看到的 msgArr 值将始终引用由于关闭而在 state 中定义的初始值。

现在，由于 msgArr 是从套接字侦听器的闭包中使用的，因此即使您收到新消息，您也将始终引用初始状态而不是更新的状态。

要解决这个问题，您必须使用 callback 方法来更新状态

   socket.on('newMsg', msg => {
        setMsgArr(prevMsgArr => [ ...prevMsgArr, { type: 'received', msg }]);
        if(!open) setUnreadMsgs(unreadMsgs + 1);
        chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight;
    });

一旦这样做，您将能够在下一个渲染周期中看到状态的更新值，从而能够根据数组渲染更新后的内容

附言请注意，紧跟在 console.log(msgArr); 之后的 setMsgArr 不会为您提供更新的值，因为状态更新是异步的并受关闭影响。请参阅 this post 以了解更多信息。

为什么状态没有正确更新？

1 个答案: