使用效果中的异步生成器 - 如何取消订阅更新

Question

我一直在 Typescript React 应用程序中使用异步生成器。

我创建了以下组件：

import React, {useEffect, useState} from 'react'
const delay = (ms : number) => new Promise(resolve => setTimeout(resolve, ms))
const fetchData = async (count : number, url: string) => { 
await delay(1000);
const title : string = await fetch(`${url}/${count}`).then(response => response.json()).then(data => data.title)
return title; 
}
const asyncGenerator = async function* () { 
let count : number = 1;
const url : string = 'http://jsonplaceholder.typicode.com/posts';
while(true) { 
yield fetchData(count, url)
count++;
}
}
const UseEffectComponent = () => { 
const [titles, setTitles] = useState<string[]>([])

useEffect(() => { 
(async () => { 
for await (const title of asyncGenerator()) { 
setTitles(t => [...t, title])
}
})();


}, [])
return (
<div>
<div>
{titles.map(t => <p>{t}</p>)}
</div>
</div>
)
}
export default UseEffectComponent;

从本质上讲，我已经创建了一个由asyncGenerator函数提供的帖子标题流，该函数将通过调用使用delay引入人为1000ms延迟的fetchData每秒从占位符 API 获取数据。

我很好奇从组件本身的流中读取此数据的最佳方法是什么。我目前使用useEffect的实现：

useEffect(() => { 
(async () => { 
for await (const title of asyncGenerator()) { 
setTitles(t => [...t, title])
}
})();

没有清理代码 - 这意味着即使卸载组件，此流也将继续提供数据。不过，我不确定解决此问题的最佳方法是什么。是否可以在组件卸载时退出此for of循环？或者有没有更好的方法来使用我的流中的数据？

Answer 1

您可以添加isMounted来检查组件是否卸载。

useEffect(() => { 
let isMounted = true;
(async () => {
for await (const title of asyncGenerator()) { 
if(!isMounted){
break;
}
setTitles(t => [...t, title])
}
})();  
return () => {
isMounted = false;
};
}, [])