Продолжить вход в React? - PullRequest
Новая
       36

Продолжить вход в React?

1 голос
/ 12 марта 2020

Итак, в настоящее время я работаю над приложением MERN, которое успешно сохраняет токены JWT через библиотеку localstorage , выживая при любых попытках refre sh (новые пользователи появляются в базе данных, et c, бэкэнд все работает как задумано).

Проблема заключается в том, что в приложении внешнего интерфейса React 'user' по умолчанию установлено 'null' в состоянии контейнера, поэтому несоответствие - это то, что не позволяет регистрировать пользователей при повторном рендеринге, несмотря на JWT. Я застрял на этом уже более суток, пытался реализовать множество возможных решений, получил помощь от моих инструкторов и т. Д. c, ничего не дает желаемого результата - есть ли у кого-нибудь совет?

Я прикрепил код из своего контейнера для справки (извините за беспорядок, я слишком расстроен этой штукой, чтобы делать с этим много), Кроме того, у меня также есть куча других Компоненты и файлы, которые так или иначе взаимодействуют с моим контейнером, не будут прикреплять их сейчас, но если кто-то почувствует, что дополнительный контекст необходим, чтобы помочь, тогда я сделаю это. Спасибо! 

import React, { Component } from "react";
import { getItems } from "../services/items";
import Routes from "../routes";
import Header from "../screens/Header";
import { verifyToken } from '../services/auth'

export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      items: [],
      isLoggedIn: false
    };
  }

  async componentDidMount() {
    // const user = await verifyToken();
    // if (user) {
    try {
      const items = await getItems();
      this.setState({
        items,
        isLoggedIn: true
      });
    }
    catch (err) {
      console.error(err);
    }
  }


  addItem = item =>
    this.setState({
      items: [item, ...this.state.items]
    });

  editItem = (itemId, item) => {
    const updateIndex = this.state.items.findIndex(
      element => element._id === itemId
    ),
      items = [...this.state.items];
    items[updateIndex] = item;
    this.setState({
      items
    });
  };

  destroyItem = item => {
    const destroyIndex = this.state.items.findIndex(
      element => element._id === item._id
    ),
      items = [...this.state.items];
    if (destroyIndex > -1) {
      items.splice(destroyIndex, 1);
      this.setState({
        items
      });
    }
  };

  setUser = user => this.setState({ user });

  //verifyUser = user => (localStorage.getItem('token')) ? this.setState({ user, isLoggedIn: true }) : null

  clearUser = () => this.setState({ user: null });

  render() {
    // const token = localStorage.getItem('token');
    // console.log(token)
    const { user, items } = this.state;
    return (
      <div className="container-landing">
        <Header user={user} />
        <main className="container">
          <Routes
            items={items}
            user={user}
            setUser={this.setUser}
            addItem={this.addItem}
            editItem={this.editItem}
            destroyItem={this.destroyItem}
            clearUser={this.clearUser}
          //verifyUser={this.verifyUser}
          />
        </main>
      </div>
    );
  }
}
...