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