Отображение новой ссылки после входа в систему [РЕАКТ]

Question

Я создаю форму входа в РЕАКТ. Адрес электронной почты / пароль сравниваются с записью в базе данных, и в случае успешного входа в систему я хочу сохранить сеанс и отобразить ссылку на дополнительный компонент в заголовке. Я получил это, чтобы работать, однако после каждого входа / выхода мне нужно обновить браузер вручную, чтобы отобразить дополнительную ссылку. Может кто-нибудь указать мне, что я делаю неправильно?

Login.js

 fetch('http://localhost:5000/getUsers')
            .then((data) => data.json())
            .then((data) => {
                // console.log(data);
                return data.filter(user => (user.EMAIL === email && user.PASSWORD === password));
            })
            .then((data) => {
                if (data.length === 1) {
                    localStorage.setItem('user', data[0].EMAIL);
                    localStorage.setItem('isLoggedIn',true);
                    this.setState({email:data[0].EMAIL, password: data[0].PASSWORD, isLoggedIn: true })

В моем маршруте

const routing = (
  <Router>
    <div>
        <Header name={localStorage.getItem("user")}  />

В компоненте Header

this.state = {
            name : this.props.name
        }

{(this.state.name !== "") ?
                    <li> <a href="/updateLiveGames">Update Live Games</a></li>
                    :
                    ""
                }

Это работает, но мне нужно обновить браузер (F5).

Спасибо за любую помощь.

Я ожидаю, что пользователь войдет в систему и отобразит дополнительную ссылку в моем заголовке, только когда пользователь вошел в систему.

Answer 1

В компоненте Header Не устанавливайте состояние, используйте props.name так:

{(this.props.name !== "")
  ? <li> <a href="/updateLiveGames">Update Live Games</a></li>
  : ""
}

Когда вы инициализируете this.state в компоненте заголовка, он будет установлен только один раз при создании компонента. Вот почему вы должны использовать this.props, который будет обновляться при каждом обновлении компонента.

При маршрутизации, когда вы используете localStorage.getItem («пользователь»), он не вызывает принудительное обновление, поскольку не является ни состоянием, ни свойством props, поэтому не обновляет компонент.

Поскольку вы не используете Redux, вы должны передать обратный вызов в качестве реквизита из Login.js в маршрутизацию:

.then((data) => {
  if (data.length === 1) {
  localStorage.setItem('user', data[0].EMAIL);
  localStorage.setItem('isLoggedIn',true);
  this.props.setLoginData(data[0].EMAIL)

А при маршрутизации вы должны получить это:

<Login setLoginData={this.setLoginData} />

setLoginData = (name) => {
  this.setState({name});
}

И передать this.state.name компоненту Header:

<Header name={this.state.name}  />