1

我正在使用 Localstorage.getItem 创建具有动态 defaultSelected 值的 RangeSlider。我在反应模态中使用 rangeSlider 所以我需要当用户打开模型并使用范围滑块创建过滤器时，状态保存在 LocalStorage 中，当用户再次打开模态时他得到 rangeSlider 最后他在开始和结束时选择的值这是我的代码：

constructor(props) {
    super(props);
    this.onPriceValueChange = this.onPriceValueChange.bind(this);   
    localStorage.setItem('priceSlider','');
  }

 onPriceValueChange(value){
    console.log("value:",value)
    console.log("value.start:",value.start)
    localStorage.setItem('priceSlider', JSON.stringify(value));  
    console.log("localStorageonPrice:",localStorage)   
    var obj = JSON.parse(localStorage.getItem('priceSlider'));
    console.log("OBJ:",obj);
    console.log("start:",JSON.parse(localStorage.getItem('priceSlider')).start);
    console.log("end:",JSON.parse(localStorage.getItem('priceSlider')).end);
  }
<Modal
       isOpen={this.props.PriceModalIsOpen}
       onHide={this.handleHide}
       contentLabel="Prix Modal"
 >
 <RangeSlider
    title="40000-80000"
    componentId="priceSlider"
    className="priceRangeSlider"
    dataField="price.keyword"
    range={{
     start: 0,
     end: 100000
    }}
    defaultSelected={{
     start: 20000,
     end: 50000
    }}
    rangeLabels={{
     start: "40",
     end: "80"
   }}                                      
    URLParams={false}
    onValueChange={this.onPriceValueChange}
    />
</Modal>

当我像这样使用 defaultSelected 的静态值进行测试时

defaultSelected={{
                start: 20000,
                end: 50000
              }}

在此处输入图像描述

console.log() 显示：

在此处输入图像描述

但是当我想要用户在关闭模态时选择的值时，我与此绑定：

defaultSelected={{
     start: JSON.parse(localStorage.getItem('priceSlider')).start,
     end: JSON.parse(localStorage.getItem('priceSlider')).end
    }}

但我得到这个错误：


未捕获的 SyntaxError： JSON.parse ()
在 ProxyComponent.render (PriceFilterModal.js:91)
在 ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
在 ProxyComponent.proxiedRender (react-hot )的 JSON 输入意外结束-loader.development.js:635)
在 finishClassComponent (react-dom.development.js:13194)
在 updateClassComponent (react-dom.development.js:13156)
在 beginWork (react-dom.development.js:13825)
在 performUnitOfWork (react-dom.development.js:15864)
在工作循环 (react-dom.development.js:15903)
在 HTMLUnknownElement.callCallback (react-dom.development.js:100)
在 Object.invokeGuardedCallbackDev (react-dom.development. js:138)
在 invokeGuardedCallback (react-dom.development.js:187)
在 replayUnitOfWork (react-dom.development.js:15311)
在 renderRoot (react-dom.development.js:15963)
在 performWorkOnRoot (react-dom.development.js: 16561)
在 performWork (react-dom.development.js:16483)
在 performSyncWork (react-dom.development.js:16455)
在 requestWork (react-dom.development.js:16355)
在 scheduleWork$1 (react-dom.development .js:16219)
在 scheduleRootUpdate (react-dom.development.js:16786)
在 updateContainerAtExpirationTime (react-dom.development.js:16813)
在 updateContainer (react-dom.development.js:16840)
在 ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)
在 react-dom.development.js:17263
在 unbatchedUpdates (react- dom.development.js:16680)
在 legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)
在渲染 (react-dom.development.js:17318)
在 renderApp (index.js:11)
在 Object. (index.js:19)
在 Object../src/index.js (index.js:10)
在webpack_require (bootstrap c230f6f2604486566c3b:678)
在 fn (bootstrap c230f6f2604486566c3b:88)
在 Object.0 (index.less?83e0 :26)
在webpack_require (bootstrap c230f6f2604486566c3b:678)
在引导 c230f6f2604486566c3b:724
在引导 c230f6f2604486566c3b:724

渲染 @ PriceFilterModal.js:91
hotComponentRender @ react-hot-loader.development.js:620
proxiedRender @ react-hot-loader.development.js:635
finishClassComponent @ react-dom.development.js:13194
updateClassComponent @ react-dom。 development.js:
13156 beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903 callCallback @ react-dom.development.js:100 invokeGuardedCallbackDev @ react-dom.development.js:138 invokeGuardedCallback @ react-dom.development.js:187 replayUnitOfWork @ react-dom。 development.js:15311 renderRoot @ react-dom.development.js:15963 performWorkOnRoot @ react-dom.development.js:16561 performWork @ react-dom.development.js:16483 performSyncWork @ react-dom.development.js:16455 requestWork @ react-dom.development.js:16355 scheduleWork$1 @ react-dom.development.js:16219 scheduleRootUpdate @ react-dom.development.js:16786 updateContainerAtExpirationTime @ react-dom.development.js:16813 updateContainer @ react-dom。 development.js:16840 ./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot。渲染@react-dom.development.js:17123（匿名）@react-dom.development.js:17263 unbatchedUpdates@react-dom.development.js:16680 legacyRenderSubtreeIntoContainer@react-dom.development.js:17259 渲染@react- dom.development.js:17318 renderApp@index.js:11（匿名）@index.js:19 ./src/index.js@index.js:10 webpack_require @ bootstrap c230f6f2604486566c3b:678 fn @ bootstrap c230f6f2604486566c3b:88 0 @ index.less?83e0:26 webpack_require@bootstrap c230f6f2604486566c3b:678（匿名）@bootstrap c230f6f2604486566c3b:724（匿名）@bootstrap c230f6f2604486566c3b:724 index.js:2178 上述错误发生在组件中：（PriceFilterModal（由ConnectFilterModal创建）inConnect(PriceFilterModal)在 DefaultPage.js:36) 在 div 中 (在 DefaultPage.js:31) 在 DefaultPage (由 Connect(DefaultPage) 创建) 在 Connect(DefaultPage) (由 Route 创建) 在 Route (在 Root.js:32) 在 Switch (在 Root.js:41) 中的 div (在 App.js:33) in div (由 Styled(div) 创建) in Styled(div) (由 URLParamsProvider 创建) 在 URLParamsProvider (由 Connect(URLParamsProvider) 创建) in Connect(URLParamsProvider) (由 ReactiveBase 创建) 在 Provider (由 ReactiveBase 创建) ThemeProvider（由 ReactiveBase 创建）在 ReactiveBase（在 App.js:29）在 div（在 App.js:27）在 App（在 Root.js:27）在 Route（在 Root.js:25）在 Switch（创建by Root) 在Router 中（由ConnectedRouter 创建） 在ConnectedRouter 中（由Root 创建） 在Provider 中（在Root.js:52 中） 在Root 中在AppContainer 中（在index.js:12 中）27) 在 App 中 (在 Root.js:27) 在 Route (在 Root.js:25) 在 Switch (由 Root 创建) 在 Router (由 ConnectedRouter 创建) 在 ConnectedRouter (由 Root 创建) 在 Provider (在 Root.js :52) 在 AppContainer 的根目录中 (在 index.js:12)27) 在 App 中 (在 Root.js:27) 在 Route (在 Root.js:25) 在 Switch (由 Root 创建) 在 Router (由 ConnectedRouter 创建) 在 ConnectedRouter (由 Root 创建) 在 Provider (在 Root.js :52) 在 AppContainer 的根目录中 (在 index.js:12)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactiveBase.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14227
logError @ react-dom.development.js:14266
callback @ react-dom.development.js:14948
callCallback @ react-dom.development.js:10879
commitUpdateQueue @ react-dom.development.js:10923
commitLifeCycles @ react-dom.development.js:14378
commitAllLifeCycles @ react-dom.development.js:15463
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15604
completeRoot @ react-dom.development.js:16619
performWorkOnRoot @ react-dom.development.js:16564
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
requestWork @ react-dom.development.js:16355
scheduleWork$1 @ react-dom.development.js:16219
scheduleRootUpdate @ react-dom.development.js:16786
updateContainerAtExpirationTime @ react-dom.development.js:16813
updateContainer @ react-dom.development.js:16840
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17123
(anonymous) @ react-dom.development.js:17263
unbatchedUpdates @ react-dom.development.js:16680
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17259
render @ react-dom.development.js:17318
renderApp @ index.js:11
(anonymous) @ index.js:19
./src/index.js @ index.js:10
__webpack_require__ @ bootstrap c230f6f2604486566c3b:678
fn @ bootstrap c230f6f2604486566c3b:88
0 @ index.less?83e0:26
__webpack_require__ @ bootstrap c230f6f2604486566c3b:678
(anonymous) @ bootstrap c230f6f2604486566c3b:724
(anonymous) @ bootstrap c230f6f2604486566c3b:724
index.js:2178 An error has occured. You're using Reactivesearch Version: 2.8.1. If you think this is a problem with Reactivesearch, please try updating to the latest version. If you're already at the latest version, please open an issue at https://github.com/appbaseio/reactivesearch/issues

使用 Firefox，我得到：

SyntaxError: JSON.parse: JSON 数据的第 1 行第 1 列的数据意外结束

在此处输入图像描述

4

1 回答 1

1

下面的代码可以工作。在存储到 localstorage 时，您需要将其存储JSON.stringify并在获取您需要做的项目时JSON.parse

import React from "react"; 
import ReactDOM from "react-dom"; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as actions from './redux/actions'; 
import { closePriceModal } from '../filter-bar/redux/actions'; 
import Modal from 'react-modal'; 
import { RangeSlider } from '@appbaseio/reactivesearch'; 

export class PriceFilterModal extends Component { 
static propTypes = { 
  simpleFilter: PropTypes.object.isRequired, 
  actions: PropTypes.object.isRequired, 
  PriceModalIsOpen: PropTypes.bool.isRequired 
}; 

constructor(props) { 
  super(props); 
  localStorage.setItem('priceSlider', ''); 
} 

onPriceValueChange = value => { 
  localStorage.setItem("priceSlider", JSON.stringify(value));
  this.forceUpdate();
} 
handleHide = () => { 
  this.props.actions.closePriceModal(); 
} 

render() { 
  const priceSlider = localStorage.getItem("priceSlider");
  const start = JSON.parse(priceSlider).start;
  const end = JSON.parse(priceSlider).end;
  return ( 
    <div className="simple-filter-price-filter-modal"> 
      <Modal 
      isOpen={this.props.PriceModalIsOpen} 
      onHide={this.handleHide} 
      contentLabel="Prix Modal" 
      > 
          <div className="multiList"> 
            <RangeSlider
                title="40000-80000"
                componentId="priceSlider"
                className="priceRangeSlider"
                dataField="price.keyword"
                range={{
                  start: 0,
                  end: 100000
                }}
                defaultSelected={{
                  start: start,
                  end: end
                }}
                rangeLabels={{
                  start: "40000",
                  end: "80000"
                }}
                URLParams={false}
                onValueChange={this.onPriceValueChange}
              />
          </div> 
        <button type="button" onClick={this.handleHide} className="btn btn-circle"></button> 
      </Modal> 
    </div > 
  ); 
} 
} 
function mapStateToProps(state) { 
  return { 
    simpleFilter: state.simpleFilter, 
  }; 
} 

/* istanbul ignore next */ 
function mapDispatchToProps(dispatch) { 
  return { 
    actions: bindActionCreators({ ...actions, closePriceModal }, dispatch) 
  }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(PriceFilterModal);

请在此处找到工作演示

于 2018-10-01T15:03:27.313 回答