React. In setState , the new value is only saved on the second click. The first gives the previous value. How can I fix it?

Question

React

I'm making a news application using a third-party API. Put in the state the base line on which depends what news to show. When a link is clicked, a function is triggered that goes through the App => HeaderApp => NewsLinksItem components. From the latter we get a new category. The line itself, if output to the console, is displayed without problems. However, when writing to setState and viewing through the console, it turns out that the write occurs the second time and displays the previous line that was before the new one.

The click behavior itself can be seen in the console: https://deokti.github.io/JavaScript/React/NewsAppR...

APP ( Link )

import React, { Component } from 'react';

import NewsLinks from '../news-links';
import SearchNewsButtons from '../search-news-buttons';
import NewsContent from '../news-content';

import '../gloval-style/style.scss';
import './App.scss';

export default class App extends Component {
  state = {
    category: 'general',
  }


  // componentDidUpdate = () => {
    
  // }

  onChangeCategory(category) {
    this.setState({category}, () => {
      this.getCategory()
    });
    console.log(this.state)
  }

  getCategory = () => this.state.category;

  render() {
    return (
      <React.Fragment>
        <header className='header'>
          <div className='container'>
            <div className="header__wrapper d-flex a-item-center">
              <h1 className="header-title"><a className="header-title-link" href="./index.html">НОВОСТИ</a></h1>

               {/* Навигация отдельно в item-list */}
               <nav className="nav m-auto">
                  <NewsLinks onChangeCategory={(name) => this.onChangeCategory(name)} />
               </nav>

              {/* Обрамляем часть секции для переноса в правую сторону */}
              <div className="detailed-container d-flex">
                <SearchNewsButtons />
              </div>
            </div>

          </div>
        </header>

        <section className="news">
          <div className="container">
            <NewsContent category={this.state.category} />
          </div>
        </section>
      </React.Fragment>
    )
  }
}

NewsLinks ( Link )

import React, { Component } from 'react';

import NewsLinksItem from '../news-links-item';

import './news-links.scss';

export default class NewsLinks extends Component {
  categoryLinks = [
    { name: 'general', label: 'Общие' },
    { name: 'sports', label: 'Спорт' },
    { name: 'entertainment', label: 'Развлечения' },
    { name: 'technology', label: 'Технологии' },
    { name: 'science', label: 'Наука' },
    { name: 'business', label: 'Бизнес' }
  ]

  
  render() {
    const { onChangeCategory } = this.props;

    const createButtons = this.categoryLinks.map(({name, label}) => {
      return (
        <li className="nav-item" key={name} onClick={() => onChangeCategory(name)}>
          <NewsLinksItem 
            name={name} 
            label={label} 
          />
        </li>
      )
    });

    return(
      <ul className="nav-list d-flex ul-none a-item-center">
        {createButtons}
      </ul>
    );
  }
}

NewsContent (The state from App Link is passed to it )

import React, { Component } from 'react';

import './news-links-list.scss';

export default class NewsLinksLinst extends Component {

  categoryLinks = [
    { name: 'general', label: 'Общие' },
    { name: 'sports', label: 'Спорт' },
    { name: 'entertainment', label: 'Развлечения' },
    { name: 'technology', label: 'Технологии' },
    { name: 'science', label: 'Наука' },
    { name: 'business', label: 'Бизнес' }
  ]

  fdsadsa = (event) => {
    event.preventDefault();
    this.props.onCategory(event.target.dataset.category);
  };


  
  render() {    
    const createButtons = this.categoryLinks.map(({name, label}) => {
      return (
        <li className="nav-item" key={name}>
          <a href={name} 
            data-category={name} 
            onClick={this.fdsadsa}
            className="nav-link">{label}</a>
        </li>
      );
    });

    return (
      <ul className="nav-list d-flex ul-none a-item-center">
         {createButtons}
      </ul>
    );
  }
};

Answer 1

setState is asynchronous, in the documentation it is paragraph 3 https ://ru.reactjs.org/docs/react-component.html#s... that the value has changed and a few more options for checking