仅响应一次本地存储初始化

我试图使用 react 来做行应用程序，所以我为此使用了本地存储。但我面临着这个问题。

在索引中.html我正在初始化本地存储。我在我的组件中更新了它。但是当我再次打开文件时，它再次被重新化。因此，数据正在丢失。

索引.html文件在这里，

<html>
  <head>
    <script src="./js/jquery.min.js"></script>
    <script src="http://localhost:35729/livereload.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script src="./build/bundle.js"></script>
    <script type="text/javascript">
    var response = 
    {
        "CONTACT_DETAILS": 
            {
                "ADDRESS_LINE_1": "2nd Street",
                "ADDRESS_LINE_2": "Vadapalani",
                "CITY": "Chennai",
                "CONTACT_NO": "43543534534",
                "COUNTRY": "India"
            }
        ,
        "PRICE_DETAILS": [
            {                
                "ITEM_ID": 1,
                "ITEM_PRICE": 8.5
            }
        ]
    }
;
      localStorage.setItem("cus_data", JSON.stringify(response));    
      </script>
  </body>
</html>

这是我的组件文件

var React  = require('react');
var routerModule = require('react-router');
var Index = React.createClass({
     getInitialState:function() {
    return {
        data:{
        CONTACT_DETAILS: [],
        PRICE_DETAILS: []
      }
      };
    },
    handleSubmit: function(){
        var itemprice = $('#itemprice').val();        
        var item_details = this.state.data.PRICE_DETAILS;
        var maxValue = 0;
        var dd = item_details.map(function(el,i){
         if (el.ITEM_ID > maxValue)
         {
              maxValue = el.ITEM_ID;   
         }
        });
        var ITEM_ID = (maxValue+1);
        var push_data = {ITEM_ID:ITEM_ID, ITEM_PRICE: itemprice};    
        item_details.push(push_data);
        var response = JSON.parse(localStorage.getItem("cus_data"));
        response.PRICE_DETAILS.push(push_data);
        localStorage.setItem("cus_data", JSON.stringify(response));
      var response = JSON.parse(localStorage.getItem("cus_data"));
      this.setState({ data: response });        
    },    
    componentWillMount: function () {
      var response = JSON.parse(localStorage.getItem("cus_data"));
      this.setState({ data: response });
  },
  render: function() {

       var m_details = this.state.data.PRICE_DETAILS;
       var cardmain = m_details.map(function(el,i) {
      return(
              <div  key={i}>
                  <p>{el.ITEM_PRICE}</p>
              </div>
            )
        }, this);
    return (
                 <div>{cardmain}<input type="text" id="itemprice" /><div onClick={this.handleSubmit}>Click Here</div></div>                 

    );
  }
});
module.exports = Index;

请帮助解决这个问题。

提前谢谢。

不要在 index.html 中设置 localStorage。

<html>
<head>
<script src="./js/jquery.min.js"></script>
<script src="http://localhost:35729/livereload.js"></script>
<style type="text/css">
</style>
</head>
<body>
  <div id="main"></div>
  <script src="./build/bundle.js"></script>
 </body>
</html>

让您的组件随时更新本地存储。

var React  = require('react');
var routerModule = require('react-router');
var Index = React.createClass({
     getInitialState:function() {
    return {
        data:{
        CONTACT_DETAILS: [],
        PRICE_DETAILS: []
      }
      };
    },
    handleSubmit: function(){
        var itemprice = $('#itemprice').val();        
        var item_details = this.state.data.PRICE_DETAILS;
        var maxValue = 0;
        var dd = item_details.map(function(el,i){
         if (el.ITEM_ID > maxValue)
         {
              maxValue = el.ITEM_ID;   
         }
        });
        var ITEM_ID = (maxValue+1);
        var push_data = {ITEM_ID:ITEM_ID, ITEM_PRICE: itemprice};    
        item_details.push(push_data);
        var response = JSON.parse(localStorage.getItem("cus_data"));
        response.PRICE_DETAILS.push(push_data);
        localStorage.setItem("cus_data", JSON.stringify(response));
        this.setState({ data: response });        
    },    
    componentDidMount: function () {
      var response = JSON.parse(localStorage.getItem("cus_data"));
      if(!response){
           response = { "PRICE_DETAILS":[], "CUSTOMER_DETAILS":[] };
      }
      this.setState({ data: response });
  },
  render: function() {

       var m_details = this.state.data.PRICE_DETAILS;
       var cardmain = m_details.map(function(el,i) {
      return(
              <div  key={i}>
                  <p>{el.ITEM_PRICE}</p>
              </div>
            )
        }, this);
    return (
                 <div>{cardmain}<input type="text" id="itemprice" /><div onClick={this.handleSubmit}>Click Here</div></div>                 

    );
  }
});
module.exports = Index;

相关内容

最新更新

热门标签：