依赖异步数据的异步/等待多个函数

Question

我正在创建一个 ReactJS 应用程序并尝试编写一个创建一组类别的函数。 此数据来自api。

const data = [
 {
   name: '',
   category = 'sports'
 },
 {
   name: '',
   category = 'food'
 },
]

我写了一个获取数据的函数。

const getData = async()=>{
        const data = await fetch(url);
        // json conversion
        setData(data);
}

但是要过滤这个数据数组，我需要将数据传递给另一个过滤函数。我该怎么做才能使我的数据数组以填充值而不是初始空数组传递？

const filterData = ()=>{
        // data is global
        const categories = [new Set(data.map((item) => item.category))]
}

我的数据数组准备好后如何调用这个函数？或者如何得到想要的结果。

Answer 1

简单，得到数据后调用过滤函数，

const getData = async()=>{
    const data = await fetch(url);
    // json conversion
    setData(data);

    // Call filter from here
    filterData (data)
}

这是最简单、最直接的方法。另一种方法肯定是监视数据更改（使用 useEffect 依赖项），但这对于简单的 IMO 任务来说可能有点过头了。