React声明周期问题，如何在页面在将其显示？

Question

当在这个页面的时候会向后台post请求，然后我获得的数据放入了singData中，
在这个music中我给name一个变量的值，但是这个name会是321undefinde,总是会在post方法之前执行。
求解，怎样可以得到我singData中的值，将其显示在页面上。

Answer 1

因为 getData() 是异步操作，在接口的数据返回之前，singData.name 是没有值的。

若你不想显示 undefined，可以给 name 一个默认值，比如空字符串。

class App {
    state = {
        singData: {
            name: '',           
        }
    }
}

或者判断一下 singData.name 的值，若不存在，则直接return。

render() {
    if (!this.state.singData.name) {
        return <p>loading</p>
    }
    return <div><Player /></div>
}

Answer 2

fetch返回的是个Promise异步，可以改用同步写法：await fetch ..., async getData(){...},调用：await this.getData();