这是一个创建于 1857 天前的主题，其中的信息可能已经有所发展或是发生改变。
萌新用 react hooks 写了个组件
const [status,setStatus]=useState(false);
useEffect(() => {
(async () => {
await init();
})();
}, [domain]);
init()方法
const init = async () => {
request().then(res=>{setStatus(true)}); //request 很慢慢
};
现在出现当我外部改变 props domain的时候 init 方法还没执行完 最后导致 state 值先被第二次 reqeust 设置 然后又被第一次 request 改变了 state 的值
求助 我改如何避免第一次请求晚于第二次改变 state ？ 或者有什么别的方法？
 |
1
zizhoutong 2019-10-22 12:40:11 +08:00
我也是萌新，但有个疑问。既然第一次渲染组件 init 没有执行完，改变 domain 第二次调用 init，那也应该是第一次先返回 res 对吗？
|
 |
2
seki 2019-10-22 12:49:35 +08:00  1
async () => { await init() } 这一句没什么含义，直接写 init 就好
取决于你的设计要求，可以 1. 实现一个简单的 promise 队列，保证第一个 promise resolve 之后开第二个请求 2. 用 p-cancelable 之类的库，在 domain 改变之后先 cancel 之前的 promise，再开新的 promise |
 |
3
xiaojiqiaozhi 2019-10-22 13:30:43 +08:00 via Android
把 domain 传给 init 作为参数 d，请求完成后判断如果 d 和 domain 相等，setState，否则不做任何操作
|
 |
4
hua123s OP @xiaojiqiaozhi 我试了试，d 和 domain 一直都是相等的。。。。好奇怪
|
|
5
hua123s OP @zizhoutong 这个倒不是，第二个请求可能更快
|
 |
7
wyatt1e34 2019-10-22 15:44:56 +08:00 1
```javascript
const [status,setStatus]=useState(false); useEffect(() => { let isCancel = false; const init = () => { request().then(res=>{ if (isCancel) { return; } else { setStatus(true); } }); //request 很慢慢 }; init(); return () => { isCancel = true } }, [domain]); ``` 加一个 isCancel 标识符就可以 |
 |
8
Philippa 2019-10-22 18:28:15 +08:00 via iPhone
😨 async await then useEffect 混到一起，我看懂你的代码但完全看不懂你写什么
|
|
9
hua123s OP @wyatt1e34 是的~一开始的时候把 flag 用 useState 定义的，setState 好乱啊，一个组件的 props 是独立的，但是 state 是公用的好晕
|
 |
10
googleGirl 2020-02-08 23:54:29 +08:00 via iPhone
@wyatt1e34 赞
|
Select Language