Передача переменной состояния дочернему компоненту через localStorage - PullRequest
Новая
       4

Передача переменной состояния дочернему компоненту через localStorage

0 голосов
/ 29 мая 2020

Я пытаюсь передать переменную состояния 'atoken', которая содержит токен доступа, дочернему компоненту 'Home' через localStorage, но когда я пытаюсь, localStorage.getItem (this.props.atoken) в 'Home ', в консоли отобразится неопределенное значение. Как я могу правильно передать эту переменную состояния (токен) из компонента «Приложение» в компонент «Главная»? 

import React, { Component } from 'react';
import Playlist from './components/playlist';
import Home from './components/Home';
import { 
    BrowserRouter as Router, 
    Route, 
} from 'react-router-dom'; 

var Spotify = require('spotify-web-api-js');
var spotifyApi = new Spotify();

class App extends Component {
  constructor(props){
    super(props);
    const params = this.getHashParams(); //tokens saved here
    const token = params.access_token;
    if (token) {
      spotifyApi.setAccessToken(token);
    }
    this.state = {
      loggedIn: token ? true : false,
      atoken: token, //access token
    };
    window.localStorage.setItem(this.state.atoken, spotifyApi.getAccessToken());
    console.log(window.localStorage.getItem(this.state.atoken));
  }

    getHashParams() { //uses authenticated users refresh and access token
      var hashParams = {};
      var e, r = /([^&;=]+)=?([^&;]*)/g,
          q = window.location.hash.substring(1);
      e = r.exec(q)
      while (e) {
         hashParams[e[1]] = decodeURIComponent(e[2]);
         e = r.exec(q);
      }
      return hashParams;
  }

  render() {
    return (
      <Router>
        <div className='App'>
          <Route exact path = '/'  component= {Home}/>
          <Route path= '/playlist' component = {Playlist}/>
        </div>
      </Router>

    ); 
  }
}
export default App;

В классе «Home» переменная состояния «atoken» не извлекает токен доступа из родительского компонента «App». 

import React, { Component } from 'react';
import './App.css';

var Spotify = require('spotify-web-api-js');
var spotifyApi = new Spotify();

class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      year: ' ',
      atoken: window.localStorage.getItem(this.props.atoken), //access token 
    };
    console.log(this.state.atoken);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);        
  }

  handleSubmit(event){
    alert("Year Submitted");
    this.props.history.push({
      pathname: '/playlist',
      state: {year: this.state.year, atoken: this.state.atoken},
    });
    event.preventDefault();
  }

  updateInput(event){
    this.setState({year : event.target.value})
  }

  render() {    
    return (
        <div id="body" className="Home">
            <div>
              <form onSubmit={this.handleSubmit}>
                <input id = "yearInput" autoComplete="off" type="text" placeholder = "Enter Year" onChange={this.updateInput} />
              </form>
            </div>
            <div id ="logout">
              <a href='http://localhost:8888' >
                  <button id="logout_btn"> Logout </button> 
              </a>
            </div>
        </div>

    ); 
  }
}
export default Home;

1 Ответ

1 голос
/ 29 мая 2020

Итак, проблема в том, как вы пытаетесь использовать локальное хранилище. При настройке локального хранилища используются две переменные. Первый - это уникальное имя элемента, который вы хотите сохранить, а второй - это значение. Поэтому, когда вы вызываете setItem, он должен быть localStorage.setItem('name',value). Прямо сейчас вы пытаетесь передать в хранилище два отдельных токена. вы бы сделали. 

  window.localStorage.setItem('mySpotifyToken', spotifyApi.getAccessToken())
  window.localStorage.setItem('otherTokenName', this.state.atoken)

Затем вы можете получить к ним доступ в своем домашнем классе, позвонив: 

  window.localStorage.getItem('mySpotifyToken')
  window.localStorage.getItem('otherTokenName')

В своем классе Home вы вызываете this.props.atoken, но вы ничего не передаете через props, поэтому он будет undefined.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

...