UseEffect 中的异步生成器 - 如何取消订阅更新

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 函数提供，该函数将通过调用fetchData 每秒从占位符API 获取数据，fetchData 使用delay 引入人工@ 987654325@延迟。

我很好奇从组件本身的流中读取这些数据的最佳方式是什么。我目前使用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;
  };
}, [])