我要执行的操作是在按下保存按钮时使用状态变量更新数据库。在保存处理程序中，将一个新值添加到this.state.saved列表中，并调用updataDatabase函数。问题在于，当按下按钮时，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>
)
}}
那里的问题是您的代码正在同步运行。您先设置状态，然后调用，this.updateDataBase();但状态不会在该上下文中更新。此后实际发生状态更新和后续渲染。您可以想象它像调用队列一样工作setState，它注意到状态需要更新，但是队列中其他所有内容都必须首先执行。
看一下这个：https : //codesandbox.io/s/32n06zlqop?fontsize=14如果单击该按钮，它将立即注销为false的状态，然后再次注销componentDidUpdate该状态，您可以看到该状态已经设置好了。
因此，您有两种选择，可以在componentDidUpdate生命周期方法内调用更新数据库函数。每次渲染后都会调用此函数，可以通过状态更改来触发该渲染。
或者，您可以传递第二个回调函数参数来设置状态，在实际设置状态后调用该参数。这可能是最优雅的版本：
this.setState({
check: true,
saved:[...this.state.saved, article]
}, this.updateDataBase)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句