JSON.parse (localStorage.getItem ('priceSlider')). Start, неожиданный конец ввода JSON

Question

Я использую Localstorage.getItem для создания RangeSlider с динамическими значениями defaultSelected.Я использую 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 () дает:

, но когда я хочу, чтобы значения выбирались пользователем, когда он закрывал привязанный модал Iс этим:

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: неожиданный конец данных в столбце строки 11 из данных JSON

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);

Пожалуйста, найдите рабочую демонстрацию здесь