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

Question

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

在 class '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;

Answer 1

所以问题在于您尝试使用本地存储的方式。设置本地存储时，它需要两个变量。第一个是您要存储的项目的唯一名称，第二个是值。因此，当您调用 setItem 时，它应该是 localStorage.setItem('name',value)。现在您正在尝试将两个单独的令牌传递给存储。你会做的。

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

然后您可以在家中 class 通过调用以下方式访问它们：

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

在您的 class 主页中，您正在调用 this.props.atoken，但您没有通过 props 传递任何内容，因此它将是未定义的。

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

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

Passing state variable to child component via localStorage

spotify

reactjs