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

Question

I am creating a ReactJS app and trying to write a function that creates a set of categories. This data is coming from an api .

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

I wrote a function that gets the data.

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

However to filter this data array, i need to pass data to another filter function. How do i do that so that my data array passes with filled value and not the initial empty array?

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

How do I call this function after my data array is ready? Or how to get the desired result.

Answer 1

Simple, call the filter function after you have got the data,

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

    // Call filter from here
    filterData (data)
}

This is the simplest and most straightforward approach. Another way would definitely be to watch for the data change (with useEffect dependency), but that can be an overkill for a simple task IMO.