Не срабатывает изменение state при помощи localstorage при обновлении страницы

Question

В приложении есть анимация двигающая заголовок лево/право в зависимости от параметра в родительском state titleState:false/true,. Сам анемируемый элемент находится в дочернем компоненте.

Нужно сделать так что бы состояние titlestate сохранялось при перезагрузке страницы. Пытаюсь сделать это при помощи localstorage и componentDidMount(){} , но по какой-то причине не работает подскажите пожалуйста, что я делаю не правильно? Еще почему-то в функции characterSwitch() в storage записывается предыдущее значение titleChar ,а не то которое было установлено в самой функции.

///////----Родительский компонент----////

export default class App extends Component {

    state = {
        titleChar:'',
        titleState:'',
    };

    componentDidMount() {

        //Достаём значения из localstorage и записываем в state

        let titleStateKey = localStorage.getItem('titleState');
            this.setState({titleState: titleStateKey || true});


        let titleCharKey = localStorage.getItem('titleChar');
            this.setState({titleChar: titleCharKey});
     }


    //Функция которая переключает при клике на блок персонажа
    characterSwitch = (titles) => {
            this.setState({
                titleChar:titles,
                titleState:false,
            });
             
            //В этом месте в **titleChar** записывается старое значение из **state**, а не
            изменённое (**titles**) в данной фу-ции.
            localStorage.setItem('titleChar', this.state.titleChar);
            localStorage.setItem('titleState', this.state.titleState);
        }

    
    //Функция переключает при клике на кнопки меню
    switchOnHeader = () => {
            this.setState({
                titleState:true,
            })
            localStorage.setItem('titleState', this.state.titleState);

    }

render(){


    return (
        <div className={classes.body}>

                <Header
                titleState={this.state.titleState}
                titleChar={this.state.titleChar}
                switchOnHeader={this.switchOnHeader}/>

                        <Route path="/" exact component={MainPage}/>
                        <Route path="/characters/" exact 
                        component={()=><Characters headerSw={this.characterSwitch}/>}/>
                        <Route path="/settings" component={Settings}/>

                <Menu headerSwitch={this.headerSwitch}/>

        </div>
    )
}

};

///////----Дочерний компонент-----//////////



export default class Header extends React.Component {



    render(){
        const {titleChar, titleState, switchOnHeader} = this.props

        //получаемый из родителя titleState
        let menuSwitch;

        //переключение стилей
        if(titleState == true){
            menuSwitch = ''
        } else if(titleState == false){
            menuSwitch = classes.menu_char
        }



        return (
            <div className={classes.header}>
                <div className={classes.wrapperMenu}>
                
                    //Элемент который должен двигатся// 
                    <div className={classes.menu_header + ' ' + menuSwitch}>
                    
                        <h1 className={classes.titleName}>{titleName}</h1>

                        <div className={classes.titleChar}>
                            <h1 className={classes.charTitle}>{titleChar}</h1>
                        </div>
                    </div>

                </div>
            </div>
        )
    }

}

Answer 1

Думаю дело в том что localStorage хранит строковые данные. А вы пытаетесь достать булевое значение.

let titleStateKey = "false"
console.log(titleStateKey || true)


titleStateKey = "true"
console.log(titleStateKey || true)


titleStateKey = false
console.log(titleStateKey || true)


titleStateKey = true
console.log(titleStateKey || true)

БЛОГ НА HUSL

Не срабатывает изменение state при помощи localstorage при обновлении страницы

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