React 组件渲染问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

React

这是一个创建于 518 天前的主题，其中的信息可能已经有所发展或是发生改变。

我在写一个 chrome 插件

content script 会给页面增加一个按钮，点击这个按钮后

content script会发消息，service worker和sidePanel都会监听这个消息
service worker收到消息后，会打开侧边栏
sidePanel监听消息，然后会把页面信息渲染出来

service worker的代码

chrome.runtime.onMessage.addListener((req, sender) => { if (req.type === 'openSidePanel') { chrome.sidePanel.open({ tabId: sender.tab.id }); } });

侧边栏的伪代码：

const SidePanel = () =>{ const [info, setInfo] = useState(''); useEffect(()=>{ chrome.runtime.onMessage.addListener((req)=> setInfo(req.info)) }) return ({info===''?'loading...':info}) }

但是有个非常奇怪的现象，就是我第一次点击，侧边栏能正常打开，但是会显示 loading

只有第二次点击之后，才会把 info 信息渲染出来

我的猜测是，第一次点击的时候，组件刚渲染出来，useEffect 里面监听消息没有生效，第二次点击后，组件已经渲染完毕了，useEffect 里面可以监听到消息了，如果是这样的话，应该怎么解决？

不是很熟悉前端，请教一下大家怎么解决

React

渲染

useeffect

5 条回复 2024-05-11 16:38:20 +08:00

wdking

2024-05-11 16:13:00 +08:00

使用 uselayouteffect

realJamespond

2024-05-11 16:27:36 +08:00

useEffect(()=>{
chrome.runtime.onMessage.addListener((req)=> setInfo(req.info))
},[])
要加 deps 啊，不然每次 render 都执行

zkkz

2024-05-11 16:31:04 +08:00

在 service worker 暂存信息，等 SidePanel 渲染完成后，再与 service worker 通信获取信息。

Albertcord

2024-05-11 16:35:18 +08:00

怀疑是没有同步更新导致的，可以尝试在侧边栏实现里这么写：
```Javascript
import {flushSync} from 'react-dom';
// ...
useEffect(()=>{
chrome.runtime.onMessage.addListener((req)=> {
flushSync(() => {
setInfo(req.info);
});
})
return () => {
// unsubscribe addListener
}
}, [])
```

izzy27

2024-05-11 16:38:20 +08:00

@zkkz 这个方法可以的，感谢