前端小白 求助 react 问题

[hua123s]

萌新用 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 ？ 或者有什么别的方法？

[zizhoutong]

我也是萌新，但有个疑问。既然第一次渲染组件 init 没有执行完，改变 domain 第二次调用 init，那也应该是第一次先返回 res 对吗？

[seki]

async () => { await init() } 这一句没什么含义，直接写 init 就好

取决于你的设计要求，可以
1. 实现一个简单的 promise 队列，保证第一个 promise resolve 之后开第二个请求
2. 用 p-cancelable 之类的库，在 domain 改变之后先 cancel 之前的 promise，再开新的 promise

[xiaojiqiaozhi]

把 domain 传给 init 作为参数 d，请求完成后判断如果 d 和 domain 相等，setState，否则不做任何操作

[hua123s]

@xiaojiqiaozhi 我试了试，d 和 domain 一直都是相等的。。。。好奇怪

[hua123s]

@zizhoutong 这个倒不是，第二个请求可能更快

[hua123s]

@seki 2 是我想要的需求 :smile:

[wyatt1e34]

```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 标识符就可以

[Philippa]

😨 async await then useEffect 混到一起，我看懂你的代码但完全看不懂你写什么

[hua123s]

@wyatt1e34 是的~一开始的时候把 flag 用 useState 定义的，setState 好乱啊，一个组件的 props 是独立的，但是 state 是公用的好晕

[googleGirl]

@wyatt1e34 赞