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（{...}，（）=＆gt; localStorage.setItem（'gold'，无论黄金应该是什么值）;

反应本地存储

1 个答案: