通过 localStorage 将状态变量传递给子组件答案

【问题标题】：Passing state variable to child component via localStorage通过 localStorage 将状态变量传递给子组件
【发布时间】：2020-05-29 15:55:47
【问题描述】：

我正在尝试通过 localStorage 将包含访问令牌的状态变量“atoken”传递给子组件“Home”，但是当我尝试时，“Home”中的 localStorage.getItem(this.props.atoken) ' 组件，未定义的值将显示在控制台中。如何正确地将这个状态变量（atoken）从“App”组件传递到“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;

【问题讨论】：

标签： reactjs spotify

【解决方案1】：

所以问题是您如何尝试使用本地存储。设置本地存储时，需要两个变量。第一个是您要存储的项目的唯一名称，第二个是值。所以当你调用 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 传递任何东西，所以它是未定义的。

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

【讨论】：