Question

我正在尝试使用react进行行应用程序，所以我使用了本地存储器。但是我遇到了这个问题。

在index.html中，我正在初始化本地存储。我在我的组件中更新它。但是当我再次打开文件时，它又重新启动了。所以数据很容易被遗漏。

Index.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;

请帮忙解决这个问题。

先谢谢。

Answer 1

不要在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>

让您的组件随时更新localStorage。

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;

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

1 个答案: