Reactjs parse（localStorage.getItem（'；priceSlider'；）。开始，JSON输入意外结束
我正在使用Localstorage.getItem创建一个带有动态默认选定值的RangeSloider。我在react模式中使用RangeSloider，因此当用户打开模型并使用range slider创建过滤器时，我需要将状态保存在LocalStorage中，当用户再次打开模式时，他将获得RangeSloider，其中包含他在开始和结束时选择的最后一个值。以下是我的代码：Reactjs parse（localStorage.getItem（'；priceSlider'；）。开始，JSON输入意外结束,reactjs,modal-dialog,rangeslider,jsonparser,reactivesearch,Reactjs,Modal Dialog,Rangeslider,Jsonparser,Reactivesearch,我正在使用Localstorage.getItem创建一个带有动态默认选定值的RangeSloider。我在react模式中使用RangeSloider，因此当用户打开模型并使用range slider创建过滤器时，我需要将状态保存在LocalStorage中，当用户再次打开模式时，他将获得RangeSloider，其中包含他在开始和结束时选择的最后一个值。以下是我的代码： constructor(props) { super(props); this.onPriceValueC
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={{
start: JSON.parse(localStorage.getItem('priceSlider')).start,
end: JSON.parse(localStorage.getItem('priceSlider')).end
}}
在JSON.parse（）
在ProxyComponent.render（PriceFilterModal.js:91）上
在ProxyComponent.hotComponentRender（react hot loader.development.js:620）上
在ProxyComponent.proxiedRender（react hot loader.development.js:635）
在finishClassComponent（react dom.development.js:13194）
在updateClassComponent（react dom.development.js:13156）
开始工作时（react dom.development.js:13825）
执行工作时（react dom.development.js:15864）
在workLoop（react dom.development.js:15903）
在htmlunknowneelement.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）
在PerformWorkRoot（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）
在UpdateContainerExpirationTime（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
在未分段更新时（react dom.development.js:16680）
在legacyRenderSubtreeIntoContainer（react dom.development.js:17259）
在渲染时（react dom.development.js:17318）
在renderApp（index.js:11）
反对。（索引js:19）
at Object../src/index.js（index.js:10）
在网页上需要（引导c230f6f2604486566c3b:678）
在fn（引导c230f6f2604486566c3b:88）
在对象0处（索引小于83e0:26）
在网页上需要（引导c230f6f2604486566c3b:678）
在引导c230f6f2604486566c3b时：724
在引导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 performworkroot@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 updateContainerExpirationTime@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 （匿名）@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 （匿名）@index.js:19 /src/index.js@index.js:10 webpack\u require@bootstrap c230f6f2604486566c3b:678 fn@bootstrap c230f6f2604486566c3b:88 0@索引小于？83e0:26 webpack\u require@bootstrap c230f6f2604486566c3b:678 （匿名）@bootstrap c230f6f2604486566c3b:724 （匿名）@bootstrap c230f6f2604486566c3b:724 index.js:2178组件中出现上述错误： 在PriceFilterModel中（由Connect（PriceFilterModel）创建） 在Connect中（PriceFilterModel）（位于DefaultPage.js:36） 在div中（位于DefaultPage.js:31） 在DefaultPage中（由Connect（DefaultPage）创建） in Connect（默认页面）（按路由创建） 路由中（在Root.js:32处） 在交换机中（在Root.js:41处） 在div中（在App.js:33中） 在div中（由Styled（div）创建） 样式化（div）（由URLParamsProvider创建） 在URLParamsProvider中（由Connect（URLParamsProvider）创建） 在连接中（URLParamsProvider）（由ReactiveBase创建） 在提供程序中（由ReactiveBase创建） 在EProvider中（由ReactiveBase创建） 在ReactiveBase中（位于App.js:29） 在div中（在App.js:27中） 应用程序内（位于Root.js:27） 路由中（在Root.js:25处） in开关（由Root用户创建） 路由器中（由ConnectedRouter创建） 在ConnectedRouter中（由Root创建） 在提供程序中（位于Root.js:52） 根 在AppContainer中（在index.js:12处） 使用Firefox，我可以： SyntaxError:JSON.p
defaultSelected={{
start: JSON.parse(localStorage.getItem('priceSlider')).start,
end: JSON.parse(localStorage.getItem('priceSlider')).end
}}
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
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);