Javascript 等待异步数据以React或React Native状态存储的正确方法

我需要从SQLite数据库中获取数据，然后将其保存在组件状态。数据库部分工作正常，问题是它保存到状态的速度不够快。如果我用setTimeout添加一些人工延迟，那么它就可以正常工作。我怎样才能更好地将这些东西结合在一起，以便在没有一百万次回调的情况下按照正确的顺序和时间工作

这不起作用：

let returnedData;
// This function works, the data comes back correctly eventually
returnedData = getDataFromDB();
this.setState({
    dbData: returnedData //but returnedData is still empty at this point
  })
// Data is not back in time to see in the variable or in state:
console.log(returnedData); // Undefined
console.log(this.state.dbData); // Undefined

但这确实有效：

let returnedData;
returnedData = getDataFromDB();

// If I add this tiny delay, it all works
setTimeout(function(){
     this.setState({
         dbData: returnedData
     })
     console.log(returnedData); // Shows correct data
     console.log(this.state.dbData); // Shows correct data
},100);

我想尝试找到一种方法，使其在没有人为拖延的情况下发挥作用。我将需要在componentWillMount中执行其中3个数据库查询，因为我的组件正在加载，并且在渲染组件之前，我需要知道我已经返回了数据

---

谢谢

初始化组件时，使用

componentDidMount

lifecycle钩子获取异步数据。这应该在使用异步获取的数据的组件中完成，或者在多个组件使用的数据的最接近的公共祖先中完成。这样做的原因是在异步检索完成后减少重新呈现组件的数量

请记住，在异步数据可用之前，还需要说明加载状态

下面是这些原则的一个基本示例

class ComponentThatRequiresAsyncData extends PureComponent {
    constructor( props ) {
        super( props );

        // initialize state
        this.state = {
            data: null
        }
    }

    // handle async operation in this lifecycle method to ensure
    // component has mounted properly
    componentDidMount() {
        axios.get( "some_url" )
            .then( ( response ) => {
                // once you have your data use setState to udpate state
                this.setState( ( prevState, props ) => {
                    return { data: response.data };
                })
            })
            .catch( ( error ) => {
                // handle errors
            });
    }

    render() {
        const { data } = this.state;
        return (
            {
                data ?
                    <WhatEverIWantToDoWithData data={ data } /> :
                    <p>Loading...</p>
          }
        );
    }
}

需要同步数据的类组件扩展了PureComponent{
建造师（道具）{
超级（道具）；
//初始化状态
此.state={
数据：空
}
}
//在此生命周期方法中处理异步操作以确保
//组件已正确安装
componentDidMount（）{
获取（“一些url”）
。然后（（响应）=>{
//获得数据后，使用setState到udpate状态
this.setState（（prevState，props）=>{
返回{data:response.data}；
})
})
.catch（（错误）=>{
//处理错误
});
}
render（）{
const{data}=this.state；
返回(
{
数据？
:
加载

}
);
}
}

对于因事件（如按钮单击）而需要加载的数据，请使用相同的方法。不要使用

componentDidMount

而是使用自己的方法，通过http调用的

then

方法中的

setState

进行异步调用并更新状态。如果将方法用作事件处理程序，请确保在构造函数中绑定该方法的

上下文

希望这有帮助。如果您有任何问题，请询问
 使用async和await.returnedData=await getDataFromDB（）；