无法对未安装的组件执行 React 状态更新。使用效果 React-Native
Can't perform a React state update on an unmounted component. useEffect React-Native
我正在使用 react-native、node、mongoose、socket.io 开发一个聊天应用程序,问题是,当我使用 socket.io 时,当我从 user1 向 user2 发送消息时,我能够从 user1 收到发送的消息,但是 useEffect
没有 re-renders 组件将新消息添加到 messages
的数组中,即使我输入了正确的依赖项.以下是参考代码:
这是我的 MessageScreen,我在功能组件 MessageScreen
的范围之外定义了 socket
:
const socket = io('ws://192.168.29.123:8080', {
transports: ['websocket'],
}); // declared outside the functional component
const [arrivalMessage, setArrivalMessage] = useState(null);
useEffect(() => {
socket.on('getMessage', data => {
console.log('received: ',data);
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
});
});
console.log('arrival msg: ',arrivalMessage);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrivalMessage, socket]);
useEffect(() => {
// ensures we don't get anyother user's msg
arrivalMessage &&
match.includes(arrivalMessage.senderId) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, match]);
useEffect(() => {
socket.emit('addUser', uid);
}, [uid]);
虽然我从朋友那里收到了正确的数据,但状态没有更新,因此我无法显示 real-time 消息。
因此,每当我从一个用户向另一个用户发送消息时,这是我的控制台输出,它确认我能够从该用户接收消息并且显然是标题错误:
LOG received: {"senderId": "61b5d1725a7ae2994", "text": {"matchId":"61b5d172511867ae298c", "senderId": "61b5d1725a7ae2994", "text": "me too!"}}
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in MessageScreen (at SceneView.tsx:126)
LOG received: {"senderId": "61b5d1725a7ae2994", "text":{"matchId":"61b5d111867ae298c","senderId":"61b5d1725a7ae2994", "text": "me too!"}}
如果有人能指出这里的错误,那将非常有帮助!
谢谢!
您需要在组件卸载时关闭套接字监听器
useEffect(() => {
const callback = data => {
console.log('received: ',data);
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
})
}
socket.on('getMessage', callback);
console.log('arrival msg: ',arrivalMessage);
// ADD THIS
return () => {
socket.off(event, callback)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrivalMessage, socket]);
如果没有必要,您也不希望套接字 运行。我不会在组件外启动套接字,它可能会留在内存中并导致内存泄漏。
更好的方法是创建一个上下文,您可以在其中启动套接字并包装需要它的 app/components。如果您的组件卸载,套接字将断开连接。
import SocketClient from 'socket.io-client'
export function useSocket(url) {
const [socket, setSocket] = useState(null)
useEffect(() => {
const io = SocketClient(url).connect()
setSocket(io)
return () => {
socket?.disconnect()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return socket
}
const SocketsContext = createContext({
socket: undefined,
})
function SocketsContextProvider({ children }) {
const socket = useSocket()
return (
<SocketsContext.Provider value={{ socket }}>
{children}
</SocketsContext.Provider>
)
}
export function useSocketEvent(event, callback) {
const { socket } = useContext(SocketsContext)
useEffect(() => {
if (!socket) {
return
}
socket.on(event, callback)
return () => {
socket.off(event, callback)
}
}, [callback, event, socket])
return socket
}
function ParentComponentWithSockets(){
return (
<SocketsContextProvider>
<YourComponent />
</SocketsContextProvider>
)
}
function YourComponent(){
const [arrivalMessage, setArrivalMessage] = useState(null);
useSocketEvent('getMessage', data => {
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
})
})
return (
//...
)
}
我正在使用 react-native、node、mongoose、socket.io 开发一个聊天应用程序,问题是,当我使用 socket.io 时,当我从 user1 向 user2 发送消息时,我能够从 user1 收到发送的消息,但是 useEffect
没有 re-renders 组件将新消息添加到 messages
的数组中,即使我输入了正确的依赖项.以下是参考代码:
这是我的 MessageScreen,我在功能组件 MessageScreen
的范围之外定义了 socket
:
const socket = io('ws://192.168.29.123:8080', {
transports: ['websocket'],
}); // declared outside the functional component
const [arrivalMessage, setArrivalMessage] = useState(null);
useEffect(() => {
socket.on('getMessage', data => {
console.log('received: ',data);
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
});
});
console.log('arrival msg: ',arrivalMessage);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrivalMessage, socket]);
useEffect(() => {
// ensures we don't get anyother user's msg
arrivalMessage &&
match.includes(arrivalMessage.senderId) &&
setMessages((prev) => [...prev, arrivalMessage]);
}, [arrivalMessage, match]);
useEffect(() => {
socket.emit('addUser', uid);
}, [uid]);
虽然我从朋友那里收到了正确的数据,但状态没有更新,因此我无法显示 real-time 消息。 因此,每当我从一个用户向另一个用户发送消息时,这是我的控制台输出,它确认我能够从该用户接收消息并且显然是标题错误:
LOG received: {"senderId": "61b5d1725a7ae2994", "text": {"matchId":"61b5d172511867ae298c", "senderId": "61b5d1725a7ae2994", "text": "me too!"}}
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in MessageScreen (at SceneView.tsx:126)
LOG received: {"senderId": "61b5d1725a7ae2994", "text":{"matchId":"61b5d111867ae298c","senderId":"61b5d1725a7ae2994", "text": "me too!"}}
如果有人能指出这里的错误,那将非常有帮助! 谢谢!
您需要在组件卸载时关闭套接字监听器
useEffect(() => {
const callback = data => {
console.log('received: ',data);
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
})
}
socket.on('getMessage', callback);
console.log('arrival msg: ',arrivalMessage);
// ADD THIS
return () => {
socket.off(event, callback)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrivalMessage, socket]);
如果没有必要,您也不希望套接字 运行。我不会在组件外启动套接字,它可能会留在内存中并导致内存泄漏。
更好的方法是创建一个上下文,您可以在其中启动套接字并包装需要它的 app/components。如果您的组件卸载,套接字将断开连接。
import SocketClient from 'socket.io-client'
export function useSocket(url) {
const [socket, setSocket] = useState(null)
useEffect(() => {
const io = SocketClient(url).connect()
setSocket(io)
return () => {
socket?.disconnect()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return socket
}
const SocketsContext = createContext({
socket: undefined,
})
function SocketsContextProvider({ children }) {
const socket = useSocket()
return (
<SocketsContext.Provider value={{ socket }}>
{children}
</SocketsContext.Provider>
)
}
export function useSocketEvent(event, callback) {
const { socket } = useContext(SocketsContext)
useEffect(() => {
if (!socket) {
return
}
socket.on(event, callback)
return () => {
socket.off(event, callback)
}
}, [callback, event, socket])
return socket
}
function ParentComponentWithSockets(){
return (
<SocketsContextProvider>
<YourComponent />
</SocketsContextProvider>
)
}
function YourComponent(){
const [arrivalMessage, setArrivalMessage] = useState(null);
useSocketEvent('getMessage', data => {
setArrivalMessage({
matchId: matchId,
senderId: data.senderId,
text: data.text,
createdAt: Date.now(),
updatedAt: Date.now(),
})
})
return (
//...
)
}