反应本地存储

Question

我做了一个计数应用程序，当你点击你的级别并获得黄金，然后你在商店里花了黄金，但我需要将数据留在本地存储。我使用getMax（）函数在商店页面中显示黄金，但我也需要在商店页面上更新黄金。

对不起，我很新的反应

我Home.js文件

import React, {Component} from 'react'; 
import '../App.css'; 
import darkalien from '../assets/darkgray__0000_idle_1.png'; 
import darkalien2 from '../assets/darkgray__0033_attack_3.png'; 
import darkalien3 from '../assets/darkgray__0039_fire_5.png'; 


var style = { 
    color: 'black', 
    fontSize: 20 
}; 
var style2 ={ 
color: '#daa520', 
fontSize: 20 
} 

export default class Home extends Component{ 
constructor(props) { 
super(props); 
this.state = { 
     i: 0, 
     j: 1, 
     k: 0, 
     max: 10, 
     maxf: 2, 
     maxi: 10 
    } 
} 
    getMax(){ 
     return this.state.max 
    } 

onClick(e) { 
    e.preventDefault(); 

    var level = this.state.j; 
    this.setState({i: this.state.i + 1}); 
    this.setState({k: this.state.k + 1}); 

    if(this.state.i >= this.state.max){ 
     this.setState({j: this.state.j + 1}); 
     this.setState({i: this.state.i}); 
     this.setState({k: this.state.k}); 
     if(this.state.j === this.state.maxf){ 
      this.setState({maxf: this.state.maxf + 1}); 
      this.setState({max: this.state.max + 10}); 
     } 
    this.setState({i: this.state.i = 0}); 
    } 

} 
render(){ 
    return(
    <header> 
     <div className="container" id="maincontent" tabIndex="-1"> 
      <div className="row"> 
      <div className="col-lg-12"> 
       <div className="intro-text"> 

         <p className="name" style={style} id="demo3">Level {this.state.j}</p> 
         <p className="name" id="demo4" style={style}>Points: {this.state.k}</p> 
         <p className="name" style={style2} id="demo5">Gold: {this.state.max}</p> 

        <img id="picture" className="img-responsive" src={darkalien} alt="alien-img" onClick={this.onClick.bind(this)} height="150" width="150"/> 

        <progress id="demo2" value={this.state.i} max={this.state.max}></progress> 
        <h1 className="name">Click me!</h1> 
        <hr className="glyphicon glyphicon-star-empty"></hr> 
        <span className="skills">Gain Experience &#9733; Get Coins &#9733; Purchase Armor</span> 
       </div> 
      </div> 
      </div> 
     </div> 
    </header> 
    ); 
} 

}

我store.js文件

import React, {Component} from 'react'; 
import blaster from '../assets/blaster_1.png'; 
import blaster2 from '../assets/blaster_3.png'; 
import alienSuit from '../assets/predatormask__0000_idle_1.png'; 
import alienHair from '../assets/alien_predator_mask_0007_hair_profile.png'; 
import Home from '../components/Home'; 


export default class Store extends Component{ 


    render(){ 
    var home = new Home 
    var max = home.getMax() 
     return(
     <section id="portfolio"> 
     <div className="container"> 
     <div className="row"> 
     <div className="col-lg-12"> 
      <h3>Armor and Weopon Store<span>  Gold: {max} </span></h3> 
     </div> 

     </div> 
     <div className="row text-center"> 

     <div className="col-md-3 col-sm-6 hero-feature"> 
      <div className="thumbnail"> 
       <img src={blaster} alt=""/> 
       <div className="caption"> 
        <h3>Reggae Blaster</h3> 

        <p> 
         <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a> 
        </p> 
       </div> 
      </div> 
     </div> 

     <div className="col-md-3 col-sm-6 hero-feature"> 
      <div className="thumbnail"> 
       <img src={blaster2} alt=""/> 
       <div className="caption"> 
        <h3>Juicy Blaster</h3> 

        <p> 
         <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a> 
        </p> 
       </div> 
      </div> 
     </div> 

     <div className="col-md-3 col-sm-6 hero-feature"> 
      <div className="thumbnail"> 
       <img src={alienSuit} alt=""/> 
       <div className="caption"> 
        <h3>Full Body Reggae Armor</h3> 

        <p> 
         <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a> 
        </p> 
       </div> 
      </div> 
     </div> 

     <div className="col-md-3 col-sm-6 hero-feature"> 
      <div className="thumbnail"> 
       <img src={alienHair} alt=""/> 
       <div className="caption"> 
        <h3>Reggae Spikes</h3> 

        <p> 
         <a href="#" className="btn btn-primary">Buy Now!</a> <a href="#" className="btn btn-default">More Info</a> 
        </p> 
       </div> 
      </div> 
     </div> 

    </div> 
    </div> 
    </section> 
    ); 
} 
} 

Answer 1

This.setState有更新状态后的回调函数。

它应该是类似的东西。 使用this.setState（{...}，（）=> localStorage.setItem（'gold'，黄金应该是什么值）;