JSON.parse(localStorage.getItem('priceSlider')).start ，JSON 输入意外结束答案

【问题标题】：JSON.parse( localStorage.getItem('priceSlider')).start , Unexpected end of JSON inputJSON.parse(localStorage.getItem('priceSlider')).start ，JSON 输入意外结束
【发布时间】：2018-10-01 14:42:51
【问题描述】：

我正在使用 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 输入意外结束
在 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)
在 beginWork (react-dom.development.js:13825)
在 performUnitOfWork (react-dom.development.js:15864)
在 workLoop (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)
在对象。 (index.js:19)
在 Object../src/index.js (index.js:10)
在 webpack_require (引导 c230f6f2604486566c3b:678)
在 fn (引导 c230f6f2604486566c3b:88)
在 Object.0 (index.less?83e0:26)
在 webpack_require (引导 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.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 （匿名）@ index.js:19 ./src/index.js@index.js:10 webpack_require @引导 c230f6f2604486566c3b:678 fn@引导程序 c230f6f2604486566c3b:88 0@index.less?83e0:26 webpack_require @引导 c230f6f2604486566c3b:678 （匿名）@引导程序 c230f6f2604486566c3b:724 （匿名）@引导程序 c230f6f2604486566c3b:724 index.js:2178 组件出现上述错误：在 PriceFilterModal 中（由 Connect(PriceFilterModal) 创建）在 Connect(PriceFilterModal) (在 DefaultPage.js:36) 在 div 中（在 DefaultPage.js:31）在 DefaultPage（由 Connect(DefaultPage) 创建）在 Connect(DefaultPage) 中（由 Route 创建）在路线中（在 Root.js:32）在 Switch 中（在 Root.js:41）在 div 中（在 App.js:33 处）在 div 中（由 Styled(div) 创建）在 Styled(div) 中（由 URLParamsProvider 创建）在 URLParamsProvider 中（由 Connect(URLParamsProvider) 创建）在 Connect(URLParamsProvider) 中（由 ReactiveBase 创建）在 Provider（由 ReactiveBase 创建）在 ThemeProvider（由 ReactiveBase 创建）在 ReactiveBase (在 App.js:29) 在 div 中（在 App.js:27 处）在应用程序中（在 Root.js:27）在路线中（在 Root.js:25）在 Switch 中（由 Root 创建）在路由器中（由 ConnectedRouter 创建）在 ConnectedRouter（由 Root 创建）在提供者中（在 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 列的数据意外结束

【问题讨论】：

当检索到的值在“[Object Object]”中时会出现此错误
是的，我得到了我使用 JSON.parse 和 JSON.Stringify 的那个 [Object Object]
所以当你尝试 JSON.parse("[object object]") 时，它会给你这个错误。
你能创建一个代码沙盒演示吗？我可以看看。

标签： reactjs modal-dialog rangeslider jsonparser reactivesearch

【解决方案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

【讨论】：

但是我在这里做了 onPriceValueChange(value){ localStorage.setItem('priceSlider', JSON.stringify(value));
我现在尝试了，但得到：index.js:2178 警告：道具类型失败：道具defaultSelected.start 在RangeSlider 中标记为必需，但其值为undefined。在 RangeSlider（由 Connect(RangeSlider) 创建）中。此外，滑块不再被激活以选择任何值！实际上它在控制台中返回 undefined。
这不是错误，而是警告。您需要作为对象传递，而不是使用 {{}} 双大括号。我更新了我的答案，请试一试
我得到一个错误：Unexpected token, expected } here start: JSON.stringify(localStorage.getItem('priceSlider')).start,
你能不能做 console.log(localStorage.getItem('priceSlider')) 并告诉我它打印了什么