Почему обновления состояния происходит только со второго раза?

Question

Подскажите пожалуйста, у меня для маршрутизации подrлючен react-router-dom. Также есть ссылки для навигации по сайту. У меня есть обработчик, который при клике на эту ссылку должен менять состояние (true или false) и в зависимости от этого меняются классы (например если я нажал на ссылку "контакты") я должен перейти на данную страницу, а сама ссылка поменять цвет (примениться класс active). Но данный класс срабатывает только при повторном нажатии на данную ссылку...

import { Link } from 'react-router-dom';
import { useState } from 'react';

export const NavBar:React.FC = () => {


const [marker, setMarker] = useState<any>({
    main: false,
    course: false,
    works: false,
    contscts: false,
});


return (
    <>
    <nav className={s.navigation}>
        <Link 
        className={marker.main ? [s.navigation__link, s.whiteMarker].join(' ') : s.navigation__link} 
        to={'/'}
        onClick={() => setMarker({...marker, main: true})}
        >Главная</Link>
        <Link 
        className={marker.course ? [s.navigation__link, s.whiteMarker].join(' ') : s.navigation__link} 
        to={'/course'}
        onClick={() => setMarker({...marker, main: false, course: true})}
        >Курс</Link>
        <Link 
        className={marker.works ? [s.navigation__link, s.whiteMarker].join(' ') : s.navigation__link} 
        to={'/works'}
        onClick={() => setMarker({...marker, course: false, works: true})}
        >Портфолио</Link>
        <Link
        className={marker.contscts ? [s.navigation__link, s.whiteMarker].join(' ') : s.navigation__link} 
        to={'/contacts'}
        onClick={() => setMarker({...marker, works: false, contscts: true})}
        >Контакты</Link>

Answer 1

Но данный класс срабатывает только при повторном нажатии на данную ссылку...

На мой взгляд - ты явно перемудрил...

Такое "выделение" можно реализовать вот таким образом.

const menu = [
  {name: 'Главная', type: 'main'},
  {name: 'Курс', type: 'course'},
  {name: 'Портфолио', type: 'works'},
  {name: 'Контакты', type: 'contscts'}
]
//
function Itm({data, act, on}) {
  const fn = _ => act(data.type)
  let cls = ['def']
  if (on) cls.push('on')
  cls = cls.join(' ')
  return <li className={cls} onClick={fn}>
    {data.name}
  </li>
}
//
function App() {
  const [marker, setMarker] = React.useState('');
  return <ul>
    {menu.map(o => <Itm key={o.name} on={o.type === marker} data={o} act={setMarker} />)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

.def {
  Color: blue;
}
.on {
  Color: red;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Почему обновления состояния происходит только со второго раза?

Ответы (1 шт):