Invalid reaction state value

Question

I would like to update the stateVisited value by passing the value from a variable named topicsVisited. However, it does not update the values. When the user visits the end of the topic page, he must push the topicID value into the array, and this array value will be stored in localstorage and transferred to the state.

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>
    );
  };
};

Answer 1

setState docs talk about two important things:

There is no guarantee that setState calls will work synchronously, and calls can be collected to improve performance.

and

() - , setState .

, setState , .

:

this.setState({topicsVisited: topicsVisited}, function() {
    console.log(this.state.topicsVisited);
    this.props.setTopicClicked(false);
}.bind(this));

Answer 2

/ setState, ?

this.setState({
  topicPageNo: 0,
  total_selected_topic_pages: 1,
  topicsVisited: []
});