Javascript 状态更改时从状态变量更新数据库

我试图做的是在按下保存按钮时使用状态变量更新数据库。在保存处理程序中，将向this.state.saved列表添加一个新值，并调用UpdateDatabase函数。问题是，当按下按钮时，setState不会更新状态变量，因此数据库中不会更新任何内容。我的问题是：如何使setState更新组件，以便更新数据库？ 这是我的密码

class Articles extends Component{
    constructor(props){
        super(props);
        this.state = {
            check:false,
            saved:[]
        }

        this.handleSave = this.handleSave.bind(this)
    }

    async componentDidMount(){
        savedArticles = this.props.article.saved

        this.setState({
            check:this.props.article.check,
            saved:this.props.article.saved
    })
}

async updateDataBase(){
    let updates = {
        body:{
            userName:this.props.article.user,
            userEmail:this.props.article.email,
            userPhone:this.props.article.phone,
            savedArticles:this.state.saved,
            userInterests:this.props.article.interestList,

        }


    }
    console.log(updates)

    return await API.put(apiName,path,updates);
}

handleSave () {
    const urlList = [];
    let article = {};

    for(let i=0; i<this.state.saved.length; i++){
        urlList.push(this.state.saved[i].url)
    }
    if(!urlList.includes(this.props.article.url)){

        article =  {
            url:this.props.article.url,
            title:this.props.article.title,
            image:this.props.article.urlToImage,
            author:this.props.article.author,
            check:true,

        }
        savedArticles.push(article)
            this.setState({
                check: true,
                saved:[...this.state.saved,article]

            })


        this.updateDataBase();

    }
}

render()
{
    console.log(this.state.check)

    return (
        <div className="item">
            <div className="card">
                <img src={this.props.article.urlToImage} alt="No available image" width="100%" height="200px"></img>
                <div>

                    <h5 className="card-title">{this.props.article.title}</h5>
                    <p className="card-text">{this.props.article.author}</p>
                    <a href={this.props.article.url} target="_blank" id="articleLink" className="btn btn-primary"><FontAwesomeIcon icon="external-link-alt" /> See full article</a>

                    {this.state.check?(
                        <button disabled={true}  id="buttonsArticle" className="btn btn-primary"><FontAwesomeIcon icon="check" /> Saved</button>
                    ):(
                        <button onClick={this.handleSave.bind(this)} id="buttonsArticle" className="btn btn-primary"><FontAwesomeIcon icon="save" /> Save Article</button>
                    )}

                </div>
            </div>
            <div className="divider"></div>
        </div>

    )
}}

类文章扩展组件{
建造师（道具）{
超级（道具）；
此.state={
检查：错误，
已保存：[]
}
this.handleSave=this.handleSave.bind（this）
}
异步组件didmount（）{
savedArticles=this.props.article.saved
这是我的国家({
检查：this.props.article.check，
保存：this.props.article.saved
})
}
异步更新数据库（）{
让更新={
正文：{
用户名：this.props.article.user，
userEmail:this.props.article.email，
userPhone:this.props.article.phone，
savedArticles:this.state.saved，
用户兴趣：this.props.article.interestList，
}
}
console.log（更新）
return wait API.put（apiName、path、updates）；
}
handleSave（）{
常量urlList=[]；
设冠词={}；
对于（设i=0；i问题在于代码是同步运行的。您正在设置状态，然后调用
this.updateDataBase（）
但是状态不会在该上下文中更新。实际更新的状态和随后的渲染在此之后发生。您可以想象它像一个队列一样工作，您可以调用
setState
，注意状态需要更新，但队列中的其他所有内容都必须首先执行

请看一下：如果单击该按钮，它会立即注销为false的状态，然后在
componentdiddupdate
中再次注销，您可以看到该状态已设置完毕

因此，您有两个选择，您可以在
componentdiddupdate
生命周期方法中调用更新数据库函数。此函数在每次渲染后调用，每次渲染可由状态更改触发

或者，您可以将第二个回调函数参数传递给set state，该参数将在实际设置状态后调用。这可能是最优雅的版本：

this.setState({
      check: true,
      saved:[...this.state.saved, article]
    }, this.updateDataBase)

我认为你可以将回调传递给ur
setState
，
this.setState（state，（）=>{//put ur logic here…}）
但这有一个问题：当用户试图一个接一个地保存多篇文章时，只有最后一篇文章被更新到数据库中。