Как получить состояние от одного реагирующего компонента к другому?

Question

Я новичок в ReactJS, поэтому я здесь. Я создал компонент «Логин», и в этом состоянии есть переменная «isAuthenticated».

После входа в систему я изменяю значение этой переменной на true и мое приложение перенаправляет пользователя на домашнюю страницу.

На главной странице я должен проверить значение 'isAuthenticated' и от него зависит компонент рендеринга.

Но это не работает. Я получил ошибку: «Невозможно получить свойство 'setState' с неопределенной или нулевой ссылкой".

Пожалуйста, помогите мне, как все это исправить.

Answer 1

Я надеюсь, что у вас будет функция входа в систему, как показано ниже

function login(){
   doLogin().then(function(data){
     this.setState({isAuthentcated: true});
  });
}

Привязать функцию входа в систему к компоненту с помощью функции стрелки ES6 следующим образом

login = () => {
       doLogin().then((data) => {
         this.setState({isAuthentcated: true});
      });
    }

Answer 2

Если вы не используете что-то вроде Redux для управления состоянием, я предлагаю вам использовать localStorage браузера, чтобы сохранить это значение для isAuthenitcated. Что-то вроде

localStorage.setItem('isAuthenticated', true); - on login

тогда в другом компоненте вы можете использовать:

localStorage.getItem('isAuthenticated'); - to figure out what you want to show

не забудьте также установить isAuthenticated в false при выходе из системы!

localStorage.setItem('isAuthenticated', false); - on logout