React状态在我的回调中从未更新过
React状态在我的回调中从未更新过
提问于 2022-08-09 16:45:52
在中，我从api调用setState。然后，我创建一个EventSource，它将在每次收到事件时更新状态。
问题是，在EventSource回调中，状态没有更新。
我的猜测是，状态是在创建回调时打印出来的，因此不能更新。
还有别的办法吗？
function HomePage() {
const [rooms, setRooms] = useState<Room[]>([]);
const getRooms = async () => {
const data = await RoomService.getAll(currentPage);
setRooms(data.rooms);
}
const updateRooms = (data: AddRoomPayload | DeleteRoomPayload) => {
console.log(rooms); // rooms is always empty
// will append or remove a room via setRooms but i need actual rooms first
}
useEffect(() => {
// setState from api response
getRooms();
// set up EventSource
const url = new URL(process.env.REACT_APP_SSE_BASE_URL ?? '');
url.searchParams.append('topic', '/room');
const eventSource = new EventSource(url);
eventSource.onmessage = e => updateRooms(JSON.parse(e.data));
}, [])
...
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-09 17:36:54
在使用setRooms时，尝试使用如下功能更新：
const updateRooms = (data: AddRoomPayload | DeleteRoomPayload) => {
setRooms((rooms) => {
if (data.type === 'add') {
return [...rooms, data.room];
} else if (data.type === 'remove') {
return rooms.filter(/* ... */);
}
});
}下面是对useState：https://reactjs.org/docs/hooks-reference.html#functional-updates中功能更新的React的引用
如果这不起作用，那么试着检查React开发工具，以确保组件的状态rooms正在更新。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73299518
复制相关文章
点击加载更多
相似问题
React组件从未更新过。
从回调更新React组件状态
更新嵌套setTimeout回调中的React状态
React ()在回调时不返回更新状态
react setState回调没有更新的状态
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
