Обновлять базу данных из переменной состояния при изменении состояния
Я пытаюсь обновить свою базу данных, используя переменную состояния при нажатии кнопки сохранения. В обработчике сохранения новое значение добавляется в список 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.info(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.info(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>
)
}}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что ваш код работает синхронно. Вы устанавливаете состояние, а затем вызываете this.updateDataBase();, но в этом контексте состояние не обновляется. После этого происходит фактическое обновление состояния и последующий рендеринг. Вы можете представить, что он работает как очередь, где вы вызываете setState, он принимает к сведению, что состояние необходимо будет обновить, но все остальное непосредственно в очереди должно выполняться первым.
Взгляните на это: https://codesandbox.io/s/32n06zlqop?fontsize=14 Если вы нажмете кнопку, она немедленно выйдет из состояния, где оно ложно, а затем снова выйдет из системы в componentDidUpdate, и вы увидите, что тогда состояние было установлено.
Таким образом, у вас есть два варианта: вы можете вызвать функцию обновления базы данных внутри метода жизненного цикла componentDidUpdate. Эта функция вызывается после каждого рендера, который может быть вызван изменением состояния.
Или вы можете передать второй аргумент функции обратного вызова для установки состояния, которое будет вызываться после фактического установления состояния. Это, вероятно, будет самая элегантная версия:
this.setState({
check: true,
saved:[...this.state.saved, article]
}, this.updateDataBase)
Однако с этим есть проблема: когда пользователь пытается сохранить несколько статей одну за другой, в базе данных обновляется только последняя.
Я думаю, ты можешь передать обратный вызов ур
setState,this.setState(state, () => { //put ur logic here... })