Question

我正在使用Localstorage.getItem创建具有动态defaultSelected值的RangeSlider。我在react-modal中使用rangeSlider，因此当用户选择模型并使用range滑块创建过滤器时，需要将状态保存在LocalStorage中，并且当用户再次打开modal时，他需要使用最后一个得到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
    }}

但是我遇到此错误：

**Uncaught SyntaxError: Unexpected end of JSON input**
    at JSON.parse (<anonymous>)
    at ProxyComponent.render (PriceFilterModal.js:91)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:620)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:635)
    at finishClassComponent (react-dom.development.js:13194)
    at updateClassComponent (react-dom.development.js:13156)
    at beginWork (react-dom.development.js:13825)
    at performUnitOfWork (react-dom.development.js:15864)
    at workLoop (react-dom.development.js:15903)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15311)
    at renderRoot (react-dom.development.js:15963)
    at performWorkOnRoot (react-dom.development.js:16561)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at requestWork (react-dom.development.js:16355)
    at scheduleWork$1 (react-dom.development.js:16219)
    at scheduleRootUpdate (react-dom.development.js:16786)
    at updateContainerAtExpirationTime (react-dom.development.js:16813)
    at updateContainer (react-dom.development.js:16840)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17123)
    at react-dom.development.js:17263
    at unbatchedUpdates (react-dom.development.js:16680)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:17259)
    at render (react-dom.development.js:17318)
    at renderApp (index.js:11)
    at Object.<anonymous> (index.js:19)
    at Object../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap c230f6f2604486566c3b:678)
    at fn (bootstrap c230f6f2604486566c3b:88)
    at Object.0 (index.less?83e0:26)
    at __webpack_require__ (bootstrap c230f6f2604486566c3b:678)
    at bootstrap c230f6f2604486566c3b:724
    at bootstrap c230f6f2604486566c3b:724
render @ 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.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 The above error occurred in the <PriceFilterModal> component:
    in PriceFilterModal (created by Connect(PriceFilterModal))
    in Connect(PriceFilterModal) (at DefaultPage.js:36)
    in div (at DefaultPage.js:31)
    in DefaultPage (created by Connect(DefaultPage))
    in Connect(DefaultPage) (created by Route)
    in Route (at Root.js:32)
    in Switch (at Root.js:41)
    in div (at App.js:33)
    in div (created by Styled(div))
    in Styled(div) (created by URLParamsProvider)
    in URLParamsProvider (created by Connect(URLParamsProvider))
    in Connect(URLParamsProvider) (created by ReactiveBase)
    in Provider (created by ReactiveBase)
    in ThemeProvider (created by ReactiveBase)
    in ReactiveBase (at App.js:29)
    in div (at App.js:27)
    in App (at Root.js:27)
    in Route (at Root.js:25)
    in Switch (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Root)
    in Provider (at Root.js:52)
    in Root
    in AppContainer (at 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列的数据意外结束

Answer 1

以下代码将起作用。在存储到本地存储时，您需要将其存储在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);

请找到有效的演示here

JSON.parse（localStorage.getItem（'priceSlider'））。start，JSON输入的意外结束

1 个答案: