[英]React state value not updating
我想通過傳遞名為topicsVisited
變量中的值來更新topicsVisited狀態的值。 但是,它沒有更新值。 當用戶訪問主題頁面的末尾時,它應該將topicID值推送到數組,並且該數組值將存儲在localstorage中並傳輸到該狀態。
import {React, ReactDOM} from '../../../../build/react';
import SelectedTopicPageMarkup from './selected-topic-page-markup.jsx';
import NextPrevBtn from './next-prev-btn.jsx';
export default class SelectedTopicPage extends React.Component {
constructor(props) {
super(props);
this.state = {
topicPageNo: 0,
total_selected_topic_pages: 1,
topicsVisited: []
};
};
navigateBack(topicPageNo) {
if (this.state.topicPageNo > 0) {
topicPageNo = this.state.topicPageNo - 1;
} else {
topicPageNo = 0;
}
this.setState({topicPageNo: topicPageNo});
};
navigateNext(totalPagesInSelectedTopic) {
let topicPageNo;
if (totalPagesInSelectedTopic > this.state.topicPageNo + 1) {
topicPageNo = this.state.topicPageNo + 1;
} else if (totalPagesInSelectedTopic == this.state.topicPageNo + 1) {
let topicsVisited = JSON.parse(localStorage.getItem('topicsVisited')) || [];
topicsVisited.push(parseInt(this.props.topicsID));
localStorage.setItem("topicsVisited", JSON.stringify(topicsVisited));
this.setState({topicsVisited: topicsVisited});
console.log(this.state.topicsVisited);
this.props.setTopicClicked(false);
} else {
topicPageNo = this.state.topicPageNo;
}
this.setState({topicPageNo: topicPageNo});
};
render() {
let topicsID = this.props.topicsID;
let topicPageNo = this.state.topicPageNo;
return (
<div>
{this.props.topicPageData.filter(function(topicPage) {
// if condition is true, item is not filtered out
return topicPage.topic_no === topicsID;
}).map(function(topicPage) {
let totalPagesInSelectedTopic = topicPage.topic_pages.length;
return (
<div>
<div>
<SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
{topicPage.topic_pages[topicPageNo].description}
</SelectedTopicPageMarkup>
</div>
<div>
<NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack.bind(this, topicPageNo)}/>
</div>
</div>
);
}.bind(this))}
</div>
);
};
};
setState文檔討論了兩個重要的事情:
無法保證對setState的調用進行同步操作,並且可以對調用進行批處理以提高性能。
和
第二個(可選)參數是一個回調函數,它將在setState完成並重新呈現組件后執行。
您可能希望合並兩個setState
調用或使用回調來完成狀態更改后要完成的工作。
回調看起來像:
this.setState({topicsVisited: topicsVisited}, function() {
console.log(this.state.topicsVisited);
this.props.setTopicClicked(false);
}.bind(this));
這個setState方法/函數不是正確的代碼,而不是直接嘗試更改狀態變量嗎?
this.setState({
topicPageNo: 0,
total_selected_topic_pages: 1,
topicsVisited: []
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.