Сохранить внутреннее состояние при обновлении страницы в React.js

Question

Это должно быть довольно обычной проблемой.

Я передаю реквизиты детям и использую их там для запроса к конечной точке.Более подробно: я нажимаю на элемент списка, я проверяю, какой элемент был нажат, я передаю его дочернему компоненту, и там, на основании пропущенного элемента, я хотел бы запросить определенные данные.Все отлично работает и я получаю то, что мне нужно, но только в первый раз, т.е.при обновлении страницы пропадает входящий реквизит, и я не могу создать правильный URL, где в качестве запроса я хотел бы использовать значение проп.Есть ли способ сохранить реквизит, чтобы при обновлении страницы он сохранял последний реквизит?

Спасибо!

Answer 1

(Вы можете взглянуть на: https://github.com/rt2zz/redux-persist, это один из моих любимых)

Точно так же, как обычное веб-приложение, если пользователь перезагрузит страницу, которую вы собираетесь иметьВаш код перезагружен.Решение состоит в том, что вам нужно хранить критические данные где-то, кроме состояния React, если вы хотите, чтобы оно сохранилось.

Вот «шаблон» в псевдокоде.Я просто использовал класс "LocalStorage", который не существует.Вы можете выбрать любой метод, который захотите.

class Persist extends React.Component {
    constuctor(props) {
        this.state = {
            criticalData = null
        }
    }
    componentDidMount() {
        //pseudo code
        let criticalData = LocalStorage.get('criticalData')
        this.setState({
            criticalData: criticalData 
        })
    }

    _handleCriticalUpdate(update) {
        const merge = {
            ...LocalStorage.get('criticalData')
            ...update
        }

        LocalStorage.put('criticalData', merge)
        this.setState({
            criticalData: merge
        })
    }

    render() {
        <div>
            ...
            <button 
                onClick={e => {
                    let update = ...my business logic
                    this._handleCriticalUpdate(update) //instead of set state
                }}
            >
            ....
        </div>
    }
}

Выгружая свои критические данные в файл cookie или локальное хранилище, вы сохраняете постоянство в жизненном цикле компонента.Это означает, что когда пользователь обновляет страницу, вы сохраняете свое состояние.

Надеюсь, это поможет!