异步循环之后请求回来的数据获取不了

在做一个react小项目时，在异步循环这一步，请求回来的数据获取不了

//tabs:包含了需要请求数据的名字
//getplayList:为请求数据的异步方法
//playList：放入的是请求回来的对象
tabs.forEach(async (tab, index) => {
            playList[index] = await getplayList(tab.name);
        })
//直接放入state中
         this.setState({
                playList,
            })
        console.log(playList);
        console.log(playList[0]);

当我执行这段函数时打印出来是这样的

其实，在执行一段代码时，如果有异步的，它属于微任务，会先执行后面的代码，所以如果想要渲染到页面是不能这样做的，有两种方式是可以解决的，一种是放入then后面执行，也就是上面的

 this.setState({
                playList,
            })

另一种就是将其放入宏任务，应该是下一个任务吧，微任务是先于宏任务执行的，也就是把赋值放入setTimeout中,以及需要注意的是如果time设置成0的话，请求数据的速度不一定比setTimeout默认的值快，所以需要根据请求数据的速度，稍微设置一下time,因此我在这里设置成了50ms

 setTimeout(() => {
            this.setState({
                playList,
                list: playList[0]
            })
             console.log(playList);
            console.log(playList[0]);
        }, 50)

这样就出来了